Rounded corners in CSS

I was talking to Jesper about the dotted CSS borders trick and the subject of rounded corners in CSS came up so I showed him my method. There are other ways that I’ve seen it done, but the other methods always require lots of complex HTML and CSS. I figure that lots of nested divs aren’t much better than using a table, so my way doesn’t require much in the way of HTML or CSS. Here’s how I do it.

Create four images for your corners. Most graphics programs have a tool that will create rounded-off squares. I’ll be using this square here…

…and I’m going to cut off the corners to get my four images:

In the spot where I want the box to show up, I create a container div to hold the box, a div for the top row and a div for the bottom row. Between the top and bottom rows, I add my content. In the top and bottom row divs, I add the left corner image and set the inline style to read display: none;. This makes the image invisible unless I make it visible through the stylesheet. That way, I can hide the effect from incompatible browsers by not showing them the stylesheet.

<div class="roundcont">
   <div class="roundtop">
	 <img src="tl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
   elit, sed do eiusmod tempor incididunt ut labore et 
   dolore magna aliqua. Ut enim ad minim veniam, quis 
   nostrud exercitation ullamco laboris nisi ut aliquip 
   ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu 
   fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
   non proident, sunt in culpa qui officia deserunt mollit 
   anim id est laborum.</p>
  
   <div class="roundbottom">
	 <img src="bl.gif" alt="" 
	 width="15" height="15" class="corner" 
	 style="display: none" />
   </div>
</div>	

The CSS sets the width and background color of the container object and the color of the text inside. The margins on interior paragraphs are set so that the text doesn’t sit right up against the edge of the box.

Then the top and bottom divs are given a background image that contains the right corner images and the left corner images from the HTML code are enabled.

.roundcont {
	width: 250px;
	background-color: #f90;
	color: #fff;
}

.roundcont p {
	margin: 0 10px;
}

.roundtop { 
	background: url(tr.gif) no-repeat top right; 
}

.roundbottom {
	background: url(br.gif) no-repeat top right; 
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

Here’s how it looks when it’s all put together.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This works in IE6, Mozilla 1.3, and Opera 7 on Windows. It should work in most other modern browsers as well.

Update: Julian Bond asked if this will work with the container div set to 100% width. Here’s the box again. The only thing changed is the width of the roundcont class.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Hashim
October 2, 2008 9:04 AM

I was trying to use this for making rounded border, what I did was wrapped your code inside a div then used curved corner images and usual border to the div in css so that it makes the complete rectangle. Now problem is those curved images are behind the div border, how can I make them appear above border to that its a nice curved rectangle ?

Dumankaya
October 6, 2008 5:13 AM

i need also tail for it, like think bubble

alex
October 6, 2008 5:57 AM

can you make this with only one picture… so you don’t have 4 corners but only one small image with rounded corners .. so the code should know how to cut the picture… and wich section of the picture should repeat ?

alex

brandon
October 8, 2008 3:53 AM

Looks really good with one exception- on IE6 I am getting wacky results on an absolutely positioned div… any ideas?

boofa
October 12, 2008 3:23 PM

took a bit of fiddling to get to work on my blog but no fault of your code, cheers for that, nice clean code!!!

graphics guy
October 21, 2008 10:47 AM

using the method explained in the tutorial, why wouldnt i just build a table and put the images in the corners?? i can make the table a % or fixed size, which is basically what you’ve done with the code only in a different way.

Mr. Yank
October 30, 2008 2:47 AM

Works great. But you might wanna change the “top” to “bottom” in the following line since it might not render properly in some cases.

.roundbottom { background: url(br.gif) no-repeat top right; }

Cheers!

bagavan
November 5, 2008 10:08 PM

Thanks for great tutorial.

sarah
November 6, 2008 6:50 AM

interesting attack on the rounded corner box.. i typically use the top and bottom divs empty with a bg that is the entire top or bottom.

& to “graphics guy”: “why wouldnt i just build a table” lol. tables are on their way out.

STagmo
November 20, 2008 4:10 PM

Hopefully the table comment is a joke, but if not, basically because tables display differently on every browser and were not created for use as layouts, only for ACTUAL TABLES. Even for those they can have some big issues on some browsers, best to avoid tables whenever possible.

Dan
December 2, 2008 8:59 AM

This is really nice, clean and maintainable way of creating rounded corners using CSS.

I know it requires images, but this will ensure that the website will work for every single browser.

Thanks Adam Dan

adi azar
December 7, 2008 8:51 AM

Rather cutting image for each corner, I would cut whole header, and footer.

thanks

mbazs
December 16, 2008 8:36 AM

Wonderful.

Isn’t CSS a style language? Then why do you have to use markup for style??

You could use tables also. That’s why css sucks

benjaoming
December 17, 2008 3:27 PM

Simple, clean and not over-done. I like it, and it worked. My previous solutions was for images, but the absolute positioning didn’t work in IE6 for the right ones… apparently placing the background image with a right offset works.

David Larsson
December 22, 2008 8:40 PM

The nice way to make Rounded corner I found is on www.htmlremix.com , a blog by an Indian geek. With 3 line css he archives it. For ie a htc file. See it here http://www.htmlremix.com/curved-corner-border-radius-cross-browser/

These are the last 15 comments. Read all 333 comments here.


Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Lijit Search

Best Of

  • Comment Spam Manifesto Spammers are hereby put on notice. Your comments are not welcome. If the purpose behind your comment is to advertise yourself, your Web site, or a product that you are affiliated with, that comment is spam and will not be tolerated. We will hit you where it hurts by attacking your source of income.
  • Customer reference questions. Sample questions to ask customer references when choosing a software vendor.
  • Movie marketing on a budget Mark Cuban's looking for more cost effective ways to market movies.
  • Rounded corners in CSS There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. This is simpler.
  • Debunking predictions Read/Write Web's authors have some goofy predictions.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Unfriendly returns (Dec 27)
Toys R Us blocks returns. You can bet I'll do all my shopping at a store with a friendlier return policy in the future.
The ongoing Comcast saga (Dec 27)
Using Twitter as a customer service tool.
Comcast and Vonage, Part 2 (Dec 26)
A Comcast tech blew their credibility.
How to make friends and influence music fans (Dec 25)
Apparently some of these labels have all the customers they need.
Comcast and Vonage (Dec 24)
I hate Comcast.
Traditions (Dec 22)
What are your family Christmas traditions?
Charlie Brown Agency (Dec 17)
Brilliant Charlie Brown Christmas and ad agency mashup.

Subscribe to this site's feed.

Elsewhere

Feed Crier
Get alerted by IM when your favorite web sites and feeds are updated.
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks
Del.icio.us
My tagstream at del.icio.us.
Waddlespot
My son's Club Penguin community. News, blogs, tips, and tricks.

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2009 Adam Kalsey.
Content management by Movable Type.