I have a radius div with 5px dashed border, but border not show properly in Firefox
.
It show well in IE and chrome.
Demo
div{
height:100px;
width: 100px;
background-color: #ccc;
border-radius: 50%;
border:5px dashed #333;
}
CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
The task is to increase space between the dotted border dots. you can just adjust the size with the background-size property, the proportion with the background-image property, and the proportion with the linear-gradient percentages. So, you can have several dotted borders using multiple backgrounds.
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. inset: displays a 3D inset border, its effect depends on border-color value. outset: Displays a 3D outset border, its effect depends on border-color value.
Your border is working on firefox see DEMO you can check it with removing radius. FireFox having bug when you tried circle with dashed border.
This is a known bug. Your options are:
<canvas>
, e.g. as demonstrated here
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