Menu
With this CSS styles I expect a circle with dotted border:
div{
border: 1px dotted #000;
padding: 50px;
border-radius: 100px;
display: inline-block;
}
But Firefox is rendering solid borders (fiddle here). Any solution?
UPDATE
THIS IS NOT AN ISSUE ANY MORE.
RESOLVED in Firefox 50
468
dashed: A series of square dashed lines are used as a border. double: Two lines placed parallel to each other act as the border. groove: Displays a 3D grooved border, its effect depends on border-color value. ridge: Displays a 3D ridged border, its effect depends on border-color value.
The border-style property specifies what kind of border to display. The following values are allowed: dotted - Defines a dotted border.
IF you're only targeting modern browsers, AND you can have your border on a separate element from your content, then you can use the CSS scale transform to get a larger dot or dash: border: 1px dashed black; border-radius: 10px; -webkit-transform: scale(8); transform: scale(8);
If you're using Firefox, this is a known bug. Your options are:
<canvas>, e.g. as demonstrated here
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
