Dashed Border Not Showing 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

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.

border-style:dashed is being displayed wrongly when using firefox

Perhaps your are trying to achieve something like:

See this Fiddle Example!

CSS

.dash{
  border: 0 none;
  border-top: 2px dashed #322f32;
  background: none;
  height:0;
} 

HTML

<hr class="dash" />

To have it equal on all browsers.

The <hr /> comes with some default values depending on the browser, and to an equal presentation on all browsers, you need to reset those values.

Why does Firefox render dashed borders misaligned from each other?

For the "why?" part of the question, there's a fairly simple explanation: the w3c doesn't define how to draw the border, so each browser writes their own independent implementation. Firefox's algorithm appears to render the border in a circular pattern, as opposed to WebKit's symmetrical pattern:

┌─ ─ ─ ─ ─ ─ ─ ─ ┐    ┌ ─ ─ ─ ─ ─ ─ ─ ─ ┐
|                ↓    ↓                 ↓
|                |    |                 |
|                |    |                 |
↑                |    |                 |
└ ─ ─ ─ ─ ─ ─ ─ ─┘    └ ─ ─ ─ ─ ─ ─ ─ ─ ┘
     Firefox                WebKit

You will notice that Internet Explorer doesn't draw the box the same as Opera/Chrome/Safari, either. There's a slight gap to the left of the border on both the top and the bottom (although this might be fixable with border-collapse).

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

Dashed border with applied border-radius have wrong length in Firefox

Using the css property of border you can not achieve it.

Css rendering is browser specific and I think the only work around is to use image.

---

Related Topics