Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dashed border not showing in firefox [duplicate]

Tags:

html

css

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;
    }
like image 282
Mukul Kant Avatar asked Oct 14 '14 07:10

Mukul Kant


People also ask

Why is my border not showing up CSS?

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.

How do I change the space between dotted border dots?

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.

Which property is used to display an inset 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. 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.


1 Answers

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:

  • If this is just for the sake of a circle, draw it with <canvas>, e.g. as demonstrated here
  • Use SVG (possibly inline), which supports various ways to stroke paths
  • Just make a Image PNG
like image 149
Manwal Avatar answered Sep 18 '22 18:09

Manwal