Why Does Border: 5Px Dashed Not Come Out as Dashed in Firefox

Why does border: 5px dashed not come out as dashed in Firefox?

It's a bug, WebKit had a similar issue but it was fixed in June. Here are all the other outstanding border-radius defects in Firefox.

Dashed border not showing in firefox

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

How to remove dashed border of select box in Firefox

Add the below to your CSS, it should fix it.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Demo Fiddle

Removing dashed lines in range input in Firefox

Use ::-moz-focus-outer selector.

input[type=range]::-moz-focus-outer {
  border: 0
}

Control the dashed border stroke length and distance between strokes

Css render is browser specific and I don't know any fine tuning on it, you should work with images as recommended by Ham.
Reference: http://www.w3.org/TR/CSS2/box.html#border-style-properties

CSS dashed border always appears white in IE8, why?

Try using:

border-color: #613e27 !important;

Dotted/Dashed circle shapes using CSS - Not rendering right in Chrome

These differences are expected because of the way how each browser renders it and there is not much that we can do to control it. If you need to support FireFox also then I would suggest moving away from this method because FF cannot display dashed borders as of now.

Your best bet would be to use SVG to achieve this because SVG allows greater control over the dots/dashes through the usage of stroke-dasharray property.

Below is a sample snippet: (I am giving this though you haven't tagged SVG because SVG is probably the best suited for things like this and the example can guide you.)

svg{  height: 100px;  width: 100px;}circle {  fill: transparent;  stroke: green;  stroke-width: 3;}.solid{  stroke-dasharray: none;}.dashed {  stroke-dasharray: 8, 8.5;}.dotted {  stroke-dasharray: 0.1, 12.5;  stroke-linecap: round;}div {  height: 100px;  width: 100px;  color: green;  font-weight: bold;  text-align: center;  line-height: 100px;}

<svg viewBox="0 0 120 120">  <circle cx="55" cy="55" r="50" class="solid" />  <foreignObject x="5" y="5" height="100px" width="100px">    <div>100</div>  </foreignObject></svg>
<svg viewBox="0 0 120 120">  <circle cx="55" cy="55" r="50" class="dashed" />  <foreignObject x="5" y="5" height="100px" width="100px">    <div>100</div>  </foreignObject></svg>
<svg viewBox="0 0 120 120">  <circle cx="55" cy="55" r="50" class="dotted" />  <foreignObject x="5" y="5" height="100px" width="100px">    <div>100</div>  </foreignObject></svg>

CSS3 Rounded and Dotted borders?

It'a bug in firefox.see this issue,mozilla doesn't support rounded corner for dotted and dashed border.

How to increase space between dotted border dots

This trick works for both horizontal and vertical borders:

/*Horizontal*/
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;

/*Vertical*/
background-image: linear-gradient(black 33%, rgba(255,255,255,0) 0%);
background-position: right;
background-size: 1px 3px;
background-repeat: repeat-y;

You can adjust the size with background-size and the proportion with the linear-gradient percentages. In this example I have a dotted line of 1px dots and 2px spacing.
This way you can have multiple dotted borders too using multiple backgrounds.

Try it in this JSFiddle or take a look at the code snippet example:

div {  padding: 10px 50px;}.dotted {  border-top: 1px #333 dotted;}.dotted-gradient {  background-image: linear-gradient(to right, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: top;  background-size: 3px 1px;  background-repeat: repeat-x;}.dotted-spaced {  background-image: linear-gradient(to right, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: top;  background-size: 10px 1px;  background-repeat: repeat-x;}.left {  float: left;  padding: 40px 10px;  background-color: #F0F0DA;}.left.dotted {  border-left: 1px #333 dotted;  border-top: none;}.left.dotted-gradient {  background-image: linear-gradient(to bottom, #333 40%, rgba(255, 255, 255, 0) 20%);  background-position: left;  background-size: 1px 3px;  background-repeat: repeat-y;}.left.dotted-spaced {  background-image: linear-gradient(to bottom, #333 10%, rgba(255, 255, 255, 0) 0%);  background-position: left;  background-size: 1px 10px;  background-repeat: repeat-y;}

<div>no  <br>border</div><div class='dotted'>dotted  <br>border</div><div class='dotted-gradient'>dotted  <br>with gradient</div><div class='dotted-spaced'>dotted  <br>spaced</div>
<div class='left'>no  <br>border</div><div class='dotted left'>dotted  <br>border</div><div class='dotted-gradient left'>dotted  <br>with gradient</div><div class='dotted-spaced left'>dotted  <br>spaced</div>

---

Related Topics