Rounded corners in CSS

Freshness Warning
This article is over 13 years old. It's possible that the information you read below isn't current.

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.

 

Yonas Teka
April 30, 2009 8:29 AM

very good method to use . it might be better if there is a way to curve the edges without the images

Tim
May 15, 2009 8:52 AM

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? =(

Michael
May 17, 2009 6:50 PM

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....

Warbo
June 8, 2009 1:41 PM

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.

Larry
June 16, 2009 10:53 PM

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.

Web Design Sussex
June 18, 2009 6:44 AM

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!?

Nick
June 18, 2009 8:08 AM

"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.…" FYI, this doesn't work.

Keenan
June 21, 2009 1:53 AM

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.

farhan
June 22, 2009 11:31 PM

this is not a professional method to create a round corner image using css

Mordy
June 25, 2009 12:38 AM

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.

red
July 6, 2009 1:15 AM

Keenan, Adam's css technique is super but your site..... :)

hasfa
July 19, 2009 1:04 AM

nice tutorial and easy to understand. thanks Adam *smile*

hasfa
July 19, 2009 1:04 AM

nice tutorial and easy to understand. thanks Adam *smile*

Godly
July 22, 2009 12:50 AM

Its a nice Coding thank you...

Some.Net(Guy)
July 22, 2009 10:02 PM

I hope people do not start using this method. This is not semantically correct. What if you want to change your design later and you don't want your boxes to have rounded corners? Now you're stuck with random rounded corners in the sides of boxes because you have hard-coded images into your code. For someone looking to create a "one-and-done" solution, this will work, but for someone looking to create manageable, maintainable code, this would be a nightmare, especially if you wanted to use this class elsewhere in your site.

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

This discussion has been closed.

Follow me on Twitter

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.
  • Embrace the medium The Web is different than print, television, or any other medium. To be successful, designers must embrace those differences.
  • Writing Realistic Job Descriptions Publish a job listing like this one and you are virtually guaranteeing that you won't get qualified applicants for the position.
  • Lock-in is bad T-Mobile thinks they'll get new Hotspot customers with exclusive content and locked-in devices.
  • 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

13

Recently

Turkey Legs (May 30)
Product naming gone awry.
Speaking for Geeks: Your Slides (Dec 17)
Tips and tricks for creating great slides.
Speaking for Geeks: Writing Your Talk (Dec 14)
Don’t wait until the night before the talk to write it. Crazy, I know.
Speaking for Geeks: Tell a Story (Dec 13)
Telling a story keeps your presentation focused, keeps your audience interested, and makes it easier for you to remember your talk.
Speaking for Geeks: Where to speak (Dec 11)
You've got a great idea for a talk. How do you find conferences to submit it to?
Speaking for Geeks: Getting your session accepted (Dec 10)
Your conference speaking submissions are not getting accepted because they're bad. Here's how to make them better.
Speaking for Geeks: What Should I Talk About? (Dec 9)
Don't wait for that conference to come calling before you start planning for it.
You should speak at conferences. Yes, you. (Dec 8)
Developers, you should give talks at conferences and your local meetups. It's easier than you think, and you’ll improve your career.

Subscribe to this site's feed.

Elsewhere

Tropo
Voice and communications platforms, including Tropo and Phono. Work.
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

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