Rounded corners in CSS

23 Jul 2003

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.

Daniel Santos
April 30, 2008 9:39 AM

Thanks.

I have some problems with IE 7, ‘cause I have “text-align: center” at body.

My solution was add “text-align:left;” at “img.corner”.

(Sorry for my English)

jaycbrf4
May 1, 2008 9:01 AM

This will not work on a gradient background or an image background… How can you do transparent corners? Need Javascript?

Adam Kalsey
May 1, 2008 9:14 AM

jaycbrf4: Sure it does. You’d just need to use an image with alpha transparency. A transparent PNG should work (older versions of IE can’t handle transparent PNGs without some work on your part,though)

eli ego
May 4, 2008 11:58 PM

Adam, but the transparent image would display the orange background-color of the div behind it, not the background of the parent container.. or?

Sanjeev
May 6, 2008 11:43 AM

Yes this is what i wanted. Is same thing not possible without images?

What i am doing is, using 2 to 3 tags for round corners at top and bottom. want to avoid such a code.

padZtar
May 6, 2008 2:55 PM

Hey Adam, Cheers for the concise explaination. This technique works incredibly well, is easy to code and looks great! Thanks for sharing :)

i steal all
May 11, 2008 6:59 AM

Its there to take eddie…

copy and paste and all is free

Nadia
May 16, 2008 4:42 AM

hi,

I am trying to code the example above and this it is a good way of doing it. I would be grateful if anyone could give me advise on how to put three divs one next to another on a page and have make sure their height is one and the same all the time, taking the div with the most content into consideration.

Thanks a lot.

Nadia

James P
May 21, 2008 12:06 PM

Hi Adam,

Thaks for a great tutorial. However, I’m having the same problem as Rachel C, with the 3 pixels sticking out at the left in IE6. I can recreate the effect when I make the window of firefox or safari smaller.

Any ideas?

Cheers,

James

Brian
May 21, 2008 4:27 PM

Hi Nadia,

Two methods come to mind. The first uses absolute or relative positioning so you can control to the pixel level. The second involves placing the three divs inside other containing divs. There are several strategies for the latter approach but remember that the box model manipulations really only account for two items side by side. To get complete control, you need to add divs every time you have two boxes. So for three boxes side by side, you need to group two inside a containing div, then group the containing div and the third box inside an outer div.

Good luck.

Srdjan
May 23, 2008 11:46 AM

Hey Adam,

The technique works great for me, other than a problem I’m having with divs that are floated right. What I’m trying to achieve is the rounded corners only on the right side of a div that is also floated to the right.

If you have any suggestions, I’d appreciate it.

Thanks

Kurt
May 27, 2008 12:44 AM

Thanks! Great explaining of the code, will help my css design skills greatly!

Sam
June 11, 2008 5:32 PM

Thats cool way, but i hope CSS nerds like you can figure out a way for us to do rounded corners without creating the images.

Thanks!

Stuart
June 28, 2008 9:20 PM

I have read through a lot of feedback where people say they are getting a bar a few pixels high at the bottom of thier box (in IE). I haven’t found a straight answer on how to fix this. Would you please save me some time and let me know?

Thanks!

dean
July 1, 2008 4:10 AM

for a way without images try googling “niftycorners”. this is a very good way also though.

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

Lijit Search

Best Of

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.
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.
How not to apply for a job Applying for a job isn't that hard, but it does take some minimal effort and common sense.
The best of 2006 I wrote a lot of drivel in 2006. Here's the things that are less crappy than the rest.
Movie marketing on a budget Mark Cuban's looking for more cost effective ways to market movies.
More of the best »

Recently Read

Get More

Subscribe | Archives

Rounded corners in CSS

Best Of

Recently Read

Get More

Recently

Elsewhere

Contact