How to create CSS browser-specific borders

Question

I am trying to obtain a dashed table border, which has rounded edges (using border-radius). I have achieved this in all other browsers, but I know it is a bug in Firefox, and will never display properly. See the problem I have here.

I am wondering if it was possible to have Firefox alone displaying a solid line, rather than a dashed line, whilst leaving the other browsers to display a dashed one.

Essentially, If Firefox,

border: 2px solid #000000;
-moz-border-radius:10px;

If any other browser,

border: 2px dashed #000000;
-webkit-border-radius:10px;
border-radius:10px;

I am fairly new to CSS and haven't dealt with browser specifics yet. If anyone could help (or point out problems to this method!) then I would be very grateful. Thanks

Answer 1

If FireFox is bugging out, it may be worth going down the route of images for firefox.

You could have some classes:

.tr, .tl, .br, .bl {
  display: none; /* Don't show for normal browsers. */
}

@-moz-document url-prefix() { /* Activate for FF. */
    div { /* Probably best to tie this to a class / id. */
      position: relative;
    }

    .tr, .tl, .br, .bl {
      display: inline;
      position: absolute;
    }

    .tr { /* top right */
      background-image: url("curved_top_right.gif");
      top: 0;
      right: 0;
    }

    .tl {} /* top left - Use .tr as a ref */
    .bl {} /* bottom left - Use .tr as a ref */
    .br {} /* bottom right. - Use .tr as a ref */
}

Then in your Html

<div>
  <div class="tr"></div>
  <div class="tl"></div>
  <div class="br"></div>
  <div class="bl"></div>
</div>

Not ideal but might help you as FF is bugged.

Answer 2

You can do this a few different ways.

• You could add a conditional stylesheet for firefox. This is a little overkill for just a couple styles.
• You could use a CSS hack. This is not the best method since it relies on a browser bug (that could be fixed).
• You could use a javascript or PHP function to parse the user-agent and append the os, browser, and version to the body or html tags as classes. Then you can write the styles with the correct class.
• You could submit a bug report and pray.

Hope this helps! Good luck!

Answer 3

The short answer is no, that's not really possible.

The ideal solution is for Firefox to fix the problem and the issue to just go away. It looks like a fairly obvious problem, so I would assume that the Mozilla team know about it; it might be worth your time checking the Firefox issue tracker to see if they've got a ticket for it and whether it's had any work done on it. Given their rapid release cycle, there's a chance it may be fixed relatively soon, you should check this -- one thing you don't want to do is spend ages fixing your site to work around it, only to find it's a non-issue by the time you've done the work.

Having said that, the effect does appear to be deliberate by the browser: I recall that earlier versions of Firefox did show dots on rounded corners, so there may be some sensible reasoning behind it. I agree it's not ideal though. But if it's a standard feature of the browser, why not just run with it and let Firefox users have it the way Firefox wants to show it? (it doesn't look that bad, does it?)

On the flip side, of course, a question that might be asked is that if you're happy to have a solid border for Firefox users, why not just make it solid for everyone? That would seem to be the simplest answer.

Assuming you do still want to resolve it, in terms of work-arounds, I would strongly advise you to shy away from browser hacks or user agent parsing; both these solutions are brittle and could lead to problems. Obviously, in this case, the worst that is likely happen is the wrong border being shown, but nevertheless, you should be wary of both techniques.

One suggestion would be to try out border-image instead of border-radius.

border-image is a relatively new and little-used CSS feature, which allows you to construct your borders using images. (you'd never guess from the name, right?)

The beauty of border-image is that you can do pretty much anything you like with your border. If you want a specific dotted pattern, then just create an image with that pattern of dots; problem solved.

The syntax is a bit fiddly, and it works best with SVG images, but I'm sure you'll get it after a bit of experimentation.

As you can probably tell, it's a very powerful feature. The main reason it's little-used is because it's new. This means it doesn't have great browser support, but for you that really shouldn't matter because you'll be drawing borders that look relatively close to the standard border-radius effect, and you can use the standard border-radius as a fall-back. The one browser that you do want to affect (Firefox) does have support for it, so it should solve the problem.

Yes, I agree, it's a slightly complicated answer to a simple question, but it may be a way to make it work reasonably consistently across all browsers. Worth a try anyway.