So I’ve been battling with an implementation of rounded corners that used a div around another div, utilizing the :before and :after pseudo elements to insert two of the rounded corners, then the backgrounds fill out the other two corners. This really turned out to be a fantasy as it utilized the !important hack, and the box could only expand with the content inside of it because of the way the :after pseudo element works. In the end your doing of lot of heavy lifting to produce something with a lot of problems.

Hello Computer

But… what if I could give you a class, that would add a rounded border to any element you desire in Mozilla, while degrading to a box with square corners in every other browser, while needing no images and no extra HTML?

Well thats been a reality for quite some time thanks to the Mozilla proprietary CSS properties.

.round {
/* The Magic */
-moz-border-radius: 10px;
/* For CSS3 */
border-radius: 10px;
/* Box Styling */
border: 1px solid #333;
background-color: white;
width: 200px;
height: 200px;
padding: 10px;
}

Here is what you get for the following HTML

<div class="round"></div>

For Mozilla:
Rounded Corners in Mozilla

For everyone else
The same style in IE7

If you examine the class, you’ll see easy rounded corners are coming in CSS3. You may also notice the boxes are different sizes, but this is because there is a 10px padding added to the element and the box model for IE says that the 200 height accounts for he padding, where as Mozilla adds the extra 20px’s (10 for top and 10 for bottom) to the height making the box 220px high.

Now we do have the slight problem that this only shows rounded corners for Mozilla, which is one of the smaller percentages of browsers, yet in regards to my situation at eProject, we only are particularly supporting Mozilla and IE. Even then, the ease of this implementation is certainly worth the trade-off that IE people don’t get the softness of rounded corners.

7 comments

7 Responses to “Mozilla Rounded Corners”

  1. Daniel WECK Says:

    If you don’t mind using JavaScript, then there’s NiftyCube:
    http://www.html.it/articoli/niftycube/index.html

  2. Justise Says:

    Its certainly possible to do a rounded corners solution that works in all browsers. The trade-off is either more markup (or script) or less functionality.

    So I could do

    blah

    or
    Round(‘div1’);
    Round(‘div2’);

    but what we were going for in our project is simple, we’ve got the crazy html, but we want small simple and will live with what effects we can get from that.

  3. Justise Says:

    Well that html didn’t show up at all, just imagine lots of divs around blah.

  4. Kai Hennig Says:

    For Safari use
    -webkit-border-radius: 10px;
    or
    -webkit-border-top-right-radius: 10px;
    -ebkit-border-top-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;

  5. Kris Gray Says:

    Thanks!

  6. Arvind Says:

    Thanks
    But what about IE6
    IE6 not picking up

  7. Kris Gray Says:

    These solutions all utilize an early implementation of the border-radius property in the webkit or mozilla browsers. IE 6 doesn’t support such a property in any way, and it appears IE 8 isn’t even going to try as well, so your shafted.

Leave a Reply