File Under: CSS, Programming

Make CSS Rounded Corners

While you’d be hard-pressed to come up with any single design tic that defines that coveted Web 2.0 aesthetic, nothing screams “I’m a hip blogger” quite like rounded corners. We’re not sure how the trend started, but even now as rounded corners have largely jumped the shark, clients still clamor for them.

Not surprisingly, there are literally dozens of ways to create the rounded corner look. Your options range from the very primitive (just create static backgrounds in Photoshop and apply them on a per-element basis) to the very progressive — CSS 3 can do rounded corners with just one line of code.

Unfortunately, not all browsers support CSS 3. So, unless you’re doing a fun site for your own experimentation, you’re going to have to resort to one of the more traditional workarounds.

We decided to dig through the many options for creating rounded corner elements and came up with a few winners that stand out from the bunch. These methods offer the best balance between simplicity and valid, semantic markup (for the most part) while keeping the images to a minimum. Not only do these methods adhere to proper web standards, but they’ll keep page load times down, too.

The options here range from pure CSS to JavaScript-based solutions, hopefully offering something for everyone.


The pure CSS method

There are a couple of ways to do rounded corners using just CSS and a background image. The trick is to use one or several images larger than the largest element you want a box around and then position them using the background-image property.

Our favorite method, created by designer Scott Schiller, is known by the sexy moniker, Even More Rounded Corners With CSS. It allows for fluid rounded corner dialogs and supports borders, alpha transparency, gradients and patterns.

Here’s what the most basic HTML looks like:

<div class="dialog">

    <div class="content">

        <div class="t"></div>



        <!-- Your content goes here -->

    </div>

    <div class="b">

        <div></div>

    </div>

</div>




Then you can apply your styles. Pay particular attention to Schiller’s inline comments, which highlight some of the trickier parts:

.dialog {

    position:relative;

    margin:0px auto;

    min-width:8em;

    max-width:760px; /* based on image dimensions */

    color:#fff;

    z-index:1;

    margin-left:12px; /* default, width of left corner */

    margin-bottom:0.5em; /* spacing under dialog */

}



.dialog .content,

.dialog .t,

.dialog .b,

.dialog .b div {

    background:transparent url(my-image.png) no-repeat top right;

    _background-image:url(dialog2-blue.gif);

}



.dialog .content {

    position:relative;

    zoom:1;

    _overflow-y:hidden;

    padding:0px 12px 0px 0px;

}



.dialog .t {

    /* top+left vertical slice */

    position:absolute;

    left:0px;

    top:0px;

    width:12px; /* top slice width */

    margin-left:-12px;

    height:100%;

    _height:1600px; /* arbitrary long height, IE 6 */

    background-position:top left;

}



.dialog .b {

    /* bottom */

    position:relative;

    width:100%;

}



.dialog .b,

.dialog .b div {

    height:30px; /* height of bottom cap/shade */

    font-size:1px;

}



.dialog .b {

    background-position:bottom right;

}



.dialog .b div {

    position:relative;

    width:12px; /* bottom corner width */

    margin-left:-12px;

    background-position:bottom left;

}



.dialog .hd,

.dialog .bd,

.dialog .ft {

    position:relative;

}



.dialog .wrapper {

    /* extra content protector - preventing vertical overflow (past background) */

    position:static;

    max-height:1000px;

    overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */

}



.dialog h1,

.dialog p {

    margin:0px; /* margins will blow out backgrounds, leaving whitespace. */

    padding:0.5em 0px 0.5em 0px;

}



.dialog h1 {

    padding-bottom:0px;

}

As you can see, the CSS is far from simple, but if you’re looking for a solution that allows complex stuff like alpha transparency and gradient images, the CSS is naturally going to get a bit tricky.

Have look at Schiller’s example page to see these techniques in action.

The main downside to this particular method is that you end up with a bit of non-semantic markup — specifically the three divs that, in a perfect world, shouldn’t be there. If that bothers you, there are other somewhat less robust methods to achieve rounded corners using just CSS.

Another method we’ve used is SpiffyCorners, though it too uses a bit of semantically-questionable markup.

There’s also the ever popular “ThrashBox” method with is more semantic, but uses more images to achieve its effects.


Use JavaScript

There are quite a few JavaScript libraries that can quench your thirst for rounded corners. It always hard to pick a favorite, but we settled on curvyCorners because it’s relatively lightweight, requires almost no effort on your part and has a very slick JQuery plugin.

To use curvyCorners, just head over to the site and download the latest version. Then upload that file to your site and include the script in your page’s head tags:

<script type="text/JavaScript" src="rounded_corners.js" />

Once you’ve got curvyCorners loading, it will automatically round any specified div tags; the only thing you need to do is call the script and set a few options. Here’s some sample code:

<script type="text/JavaScript">



  window.onload = function()

  {

    settings = {

      tl: { radius: 10 },

      tr: { radius: 10 },

      bl: { radius: 10 },

      br: { radius: 10 },

      antiAlias: true,

      autoPad: false

    }



    var divObj = document.getElementById("myDiv");



    var cornersObj = new curvyCorners(settings, divObj);

    cornersObj.applyCornersToAll();

  }



</script>

Notice that we’ve set the round radius to 10 pixels and applied it the a div with the id “myDiv.” Just replace myDiv with the names of the divs you want to round and you’re all set. For more details, and some examples, be sure to check out the curvyCorners site.

CurvyCorners gives you rounded corners with very little effort and doesn’t rely on large images with tricky CSS. It does, however, require JavaScript. Unfortunately, your pages will fall apart for users that have it turned off.


CSS 3, A Rounded Corners Revolution

As you have probably figured out right now, creating rounded corners requires some amount of compromise — whether you choose bulky XHTML or JavaScript as a workaround. But the future is looking quite bright.

CSS 3 makes creating rounded corners dead simple, only one line of code necessary:

border-radius: 10px;


It’s a revelation! Of course, only a handful of browsers currently support border-radius, which means for most sites it isn’t a viable option.

Note: See our guide, Get Started with CSS 3, for more details on how to create rounded corners and more using CSS 3.

But it should give you some comfort to know that someday, in a galaxy far, far away, rounded corners will be easy. Like, one-line-of-freaking-code easy.

Of course, by then they’ll just look sooo 2006.