This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
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.
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.
You can use the same method for transparent corners, just make the images PNG. The top, left, bottom and right borders (not corners) will need a small PNG as well, and probably another for the middle content area.
If you surround the table with a div, you can do some really nice effects, like the MAC OS growler.
I wish everyone would stop blasting this method. It is currently the only way to get rounded corners to work in ALL browsers while still separating presentation from CSS and javascript. CSS3 won’t be fully supported by all browsers for at least another few years.
I’m very pro-image-based rounded corners because I think anti-aliasing is important. If you have jaggy rounded corners, they’re not really round, are they? More of a distraction than anything… So I think you’re on track in that regard.
Unfortunately for your method, it assumes that the background color will be solid and unchanging. Probably fine for many people, but not for a wallpaper and gradient junkie like myself.
There really is no good solution that I’ve seen.
I still think the best way to do rounded corners is with a 9-cell table having a transparent PNG in each corner. It makes me sad to say this because I really would like to keep everything CSS, but CSS fails at rounded corners and that’s the bottom line. :-(
Short way: background: url(cornettopleft.gif) top left no-repeat, url(cornettopright.jpg) top right no-repeat, url(cornetbottomleft.gif) bottom left no-repeat, url(cornetbottomright.gif) bottom right no-repeat;
Perdele: That’s not valid CSS. That won’t work in any browser at all.
How would you do this with an outline?
Hi Adam,
Thank you very much for your code. It works beautifully.
Now, how would you do it if you wish the borders with a different color than the inside?
Thanks in advance for your help.
Warm regards,
Rox from hot Lima in Peru, South America
very good method to use . it might be better if there is a way to curve the edges without the images
I have this same problem.
Hi I want a different color as background color, but then these white edges appears arround my corners.
Any solutions for this?
=(
TIM - I think the white edges around your corners are caused by a white matte on the .gif img corners.
I’m guessing that you have a fairly dark background - right?
TO FIX - re-create the corners in whichever graphics program you use. When you save for web set the matte to the same color as your background.
STEPHEN - Easiest way to get a border around this is to recreate the image with a border and save them with no transperancy, then just use border: solid 1px #ccc; on the class .roundcont. Ajust colour and size to suit and you’ll have a rounded corner box with a border.…
This may look like a lot of coding to do round corners, it really saves a lot of effort if you have to make more than one round-cornered box. You only have to write the css once and you can use it over and over.
Plus, it’s a lot easier to manage than the old nine-cell table method.
Good tutorial if I’ve got complex imagery to use as a background. For the easy, everyday rounded corners and rounded div backgrounds (widgets), I use www.easyimg.com.
Thanks again.
I believe in Microsoft Web Developer Studio or whatever they call it, you can do rounded corners at the click of a button… whats the chances that its not compliant code though!?
Hi Adam,
Your css works great,
http://evolution.server101.com/contacts.htm
I used it for the trading hours.
Question for you, how do I put it with in the existing dive that makes up the right content instead of it clinging to the left edge like it does now.
Effective but still easy to follow…I wish those two things went together more often :)
I’ve been looking for a technique simple enough to convert into a reusable user-control for an asp.net project I’m working on and this might do it.
Thanks for sharing Adam - much appreciated.
These are the last 15 comments. Read all 356 comments here.
Adam Kalsey
Mobile: 916.600.2497
Email: adam AT kalsey.com
AIM or Skype: akalsey
©1999-2009 Adam Kalsey.
Content management by Movable Type.
Adam Kalsey
whitsey
February 26, 2009 4:04 PM
This is ok if you are using corners with a background… Unfortunately not so good for corners with transparent background… Ph well, back to the drawing board I guess…
While I would prefer to simply create a small background for the div, it needs to be scalable… The height is always going to fluctuate based on the text within the div and I don’t want to place a fixed width - I like flexibility!