Your Ad Here

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.

 

Eddie
March 14, 2008 4:43 PM

Is this totally free? We are thinking to use it in our company and we are wondering if we need to buy license.

We are ready to pay for license if required,

Please let me know, Eddie Moses

Maksudul Alam
March 17, 2008 8:34 AM

Very Nice.… Worked for me. Thanks.

travis
March 19, 2008 3:02 PM

worked great for me, thanks!

Dave
March 20, 2008 9:18 AM

Worked great on all browsers!

Papito
March 27, 2008 4:43 AM

Me ha gustado por su simplicidad aunque sea un método antiguo

Gracias

Paul
March 28, 2008 2:10 AM

That’s a really useful explanation. You explain the process much more concisely than most other people writing on this topic.

Those who would rather not use a graphics program to create their initial images might want to check out a new application I have been working on at http://www.thoughtless.ca

It will let you change the size, shape, and color of your corners directly in the css, without without using a graphics editor.

John
March 29, 2008 6:50 AM

BULL SHIT its not workling at all

i wanna use this inside a div tag which forms my page’s left colum

like2program
April 3, 2008 4:30 AM

Eddie I am pretty sure this si just how to do it… I don’t even know how you would copyright orange square. If I could I would be the richest man in the world! All hail my box: _ |_|

Seriously though, thank you very much for this…

adi azar
April 5, 2008 1:29 PM

Thats awesome! I do not feel very comfortable with creating images, but the overall idea is cool.

Thanks for sharing! adi azar

Joe
April 13, 2008 2:10 PM

I am getting a white bar (my ‘inside’ color) a few pixels high below the bottom of my box. My corners are 15 px high and my top looks good. So close… Any thoughts?

Michael S.
April 19, 2008 8:56 AM

Looks great, I’ll give it a try. Much more efficient than the way I usually do this.

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?

These are the last 15 comments. Read all 287 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

  • Embrace the medium The Web is different than print, television, or any other medium. To be successful, designers must embrace those differences.
  • Pitching Bloggers Forget what you learned in your PR classes. Start acting like a human instead of a marketer, and the humans behind the blogs will respond.
  • Customer reference questions. Sample questions to ask customer references when choosing a software vendor.
  • California State Fair The California State Fair lets you buy tickets in advance from their Web site. That's good. But the site is a horror house of usability problems.
  • 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.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Sprout Test (May 7)
A test post for Sprout widgets.
Product Leadership (May 3)
An anthology of product leadership writing.
Fighting Monster patent claims (Apr 16)
The patent bully picked on the wrong little guy.
Peavy's pine tar (Apr 6)
Jake Peavy's cheating
Bush and Morgan on inner city baseball (Mar 30)
Morgan and Bush discuss the role of baseball in the inner cities.
Not a fork (Mar 27)
We have no intention of forking Drupal. That would be nuts. So what are we doing then?
Eating our dogfood in the sausage factory (Mar 26)
Recursive development for the new Drupal powered community platform.

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-2008 Adam Kalsey.
Content management by Movable Type.