Curved boxes in CSS

Curved boxes are straight forward to do in CSS. Here's a quick tutorial of how to achieve curved boxes in CSS and what's to come in CSS 3.

What we want to achieve

Here's a graphic of the final product - a box with curved edges that will expand if the text is enlarged.

To start with we will make the graphics in Photoshop.

Curved boxes - Making the graphics

Open Photoshop and choose the rounded rectangle tool (shortcut of U on the keyboard). Decide on the size and colour of your rectangle and then draw a rectangle. You can make the curve bigger or smaller by changing the size of the radius.

Cut the curve out just below the last pixel of the curve. You can make the bottom curve quickly and easily by going to Image > Rotate Canvas > 180 º CW

The markup

In order to create a cross-browser friendly box we need to attach the image to HTML elements. This method requires at least two elements inside the div. In this case we use the h2 and p tags and apply a background image to each through the CSS.

Our markup looks like this

<div class="curved-box">
        
       <h2>This is a curved box</h2>
            
       <p>This text will resize and not break the box.</p>
        
</div>

Applying the CSS

We add the curves through the CSS by accessing the elements and applying a background image. The top one is applied to the h2 and the bottom to the p tag. Make sure the background to the div is the same colour too.

.curved-box
    {
    width: 298px;
    margin: 10px;
    background-color: #c3d0d4;
}

.curved-box h2
    {
    background: #c3d0d4 url(../images/curve_top.png) no-repeat left top;
    color: #f4fbfd;
    padding: 10px 15px 5px 15px;
}

.curved-box p
    {
    background: #c3d0d4 url(../images/curve_bottom.png) no-repeat left bottom;
    margin: 0px;
    padding: 5px 15px 10px 15px;
    text-align: left;
} 

Using this code the text will resize without breaking the box.

Have a look at the code in action in the example.

Browser support: IE5+, Netscape 6+, Firefox 1+, Safari 1+, Opera 7+, Flock, Camino

CSS3 will make it even easier

Once CSS3 is finally agreed it will be even easier to curve the edges of boxes. "Border-radius" will curve the corner of the box. For now browser support is not great and indeed browsers have their own proprietary properties:

-webkit-border-radius: 10px; /* Safari prototype */
-moz-border-radius: 10px; /* Gecko browsers */
border-radius: 10px; /* Everything else - limited support at the moment */ 

Currently supported in Camino 1+, Firefox 1+, NOT IE. The code degrades gracefully so if it is not supported there will be no curves but it will still render. Check out the example to see it in action.

Comments

Marcelo Jan 28 2007

very cool! Thanks

Joost de Valk Jan 30 2007

Opera and some other browsers support or will be supporting border-radius soon as well. David Storey from Opera has recently said a thing or two about Opera’s upcoming new CSS3 features, unfortunately border-radius wasn’t among that yet, but I suppose they’ll support it “soonish”.

Darlene Feb 1 2007

This is a very clean look, thanks for sharing.

Rex Feb 3 2007

Nice tut , i really like it (Anyway i was using anther way to do it , lil hard)
this one is easier :D
and i really like it
5/5

Andreas Feb 18 2007

In the article it says you place the top background in the div, and the bottom in the p, but in the code you actually put the top in the h2.
To me it seems the div and the h2 are the “safe” elements to use in this case.
Putting it in the p obviously means that you must have one, and only one, p in your box, why not put it in the div?
Also, i would suggest setting the padding in the div, instead of every element inside the div, then simply using negative margins for the h2.

George Ornbo Feb 18 2007

@Andreas - Thanks for pointing that out. Post updated. Of course you can apply it to the div and h2 if you wish. Occassionally I like to apply a background image to the div too (a gradient for example). For that reason I don’t use the div as you suggest.

As for padding the div I prefer to avoid using padding on containing divs because of the box model problem in IE, but it is a matter of personal style I suppose so if you prefer that then great. I find I write less code and avoid hacks as a result.

rodney Feb 22 2007

Hi guys,

like this post and the drop shadow one. I was wondering though how do you combine the two? i.e. the curved boxes and a shadow effect?

George Ornbo Feb 22 2007

@rodney - ha! through the miracle of google it looks like someone has done it already.

Rodney Mar 5 2007

Thanx George. Was of much help. btw does anyone know how to do those fancy footers (seems like a web 2.0 trend) found in sites like these ones? http://www.thecity.org/

Mike Mar 21 2007

This was no help. I could not get them to work. created a nice looking box in photoshop that was 275 pixels wide. made the top and bottom and saved as gif files. Just displays a square box. Moving on.

Mike Mar 21 2007

figured it out. Don’t use transparent gifs. If so you get the box showing through and it looks square. Now I have to figure out how to get an image in side on the left and text links on the right side….joy.

rohin Mar 23 2007

That’s cool , but you cannot rely on it since only a few browsers support this, as for now I think the best method is to use background images. We have to wait until the css3 compliant browsers become more popular

Cricci Apr 10 2007

I am new to CSS and I cannot make this work although i feel I did everything correctly. The only confusion I had as is the h2 and the p a class or an element or other? I am using Go-live CS2’s CSS editor to add this info.

please take a peak at my square box
http://www.themediagame.com/adobeCS2/index.html

Christina

stephen murdoch Apr 15 2007

Sorry but I don’t like this method at all -

Check out the following tutorial for a different method that some people might prefer: http://methvin.com/jquery/jq-corner.html

I also recommend using NiftyCorners Javascript file. Just google it and you’ll find lots of useful info on it and how to use it

Christina Ricci Apr 16 2007

I am trying to use Nifty cube in GoLiveCS2. All was working fine until I added a rollover button then I lost the curve? I need to use layers, text, swf over these curved boxes and I am having trouble with just rollover images - help would greatly be appreciated - thanks

no rollover and curved box: http://www.themediagame.com/adobeCS2/page.html

rollver and loss of curved box: http://www.themediagame.com/adobeCS2/page2.html

kloplop321 Jan 22 2008

Thanks a lot :)

Vivek Prakash Apr 8 2008

The post was nice, but can I need a background that can stretch horizontally. Can anyone help?

Ajith Edassery May 19 2008

Any idea how can we simplify it when you have to make multiple rounded boxes with the same image? I have three rounded boxes on one page - one pink, one light yellow and light green… Can I use four corner images (of b/g color) to satisfy all the three boxes?

My idea is to use the left out portion (and not the pie) of the corner images. Please pass on if you have any tip.

Great post!

Thanks,
Ajith

Chinese SEO Services May 23 2008