Simple Round Corners in CSS

Tagged:  

If you have developed a web 2.0 application you have probably used some technique to create rounded corners. Well, over at Search-This.com they have put together a good post about techniques for creating rounded corners. The tutorial attempts to make the process of creating rounded corners simple.

Below is an excerpt from the post.

One Size Fits All

We are going to use a single image (20px x 20px) to provide our rounded corners and to save on using different images we will use one image only and simply place each corner into place using the background-position property. The image is completely round but I'll only be showing one quadrant of it at a time and therefore we can supply all four corners with one simple image weighing in at only 300 bytes.

Figure 3

one-round-quadrant.png

The benefit of using a single image is that all corners get loaded immediately after the first corner is drawn so there is virtually no delay.

Cut It Out

You may think that you could simply place the image in the four corners of a rectangular box but things aren't as simple as that. Our box needs to have a background color and as we are using a white corner image we need a white background for our box. However, if we place a transparent corner in the corner of that box then in fact nothing really happens. The reason is that the transparent part of the image lets the white background show through and all we get is the square box we started with.

In order for the corners to work properly the corner of the box must be over the background color of the element outside our current box. We therefore need to drag the round corners outside the box to start with but that presents more problems. Here is a screenshot of what the corners will look like outside the box so you can understand what's going on

Figure 4

simple-screen3.jpg

As you can see we have a problem whatever we do! If the images are inside the rectangle then they become invisible. If they are outside the rectangle then it looks even worse as figure 4 above shows

What we really need is a rectangular box where the four corners are cut-out to give a cross-shaped effect. If we made sure that the cut-out matched the radius of our circle (10px) then we could pop our corners nicely into place.

We can achieve this by nesting an inner box inside our outer box and then dragging it outside of the parent using a negative top and bottom margin. If we also give side padding to the parent and top padding to the child we can get a cut out effect like this.

Figure 5

simple-screen2.jpg

The CSS mark up for this is as follows:

CSS:

  1. * {margin:0;padding:0}
  2. h1 {margin:.5em;}
  3. body {
  4. background:#e5e5e5;
  5. color:#000;
  6. }
  7. .box{
  8. float:left;
  9. background:#fff;
  10. padding:0 10px;
  11. margin:10px;
  12. display:inline;/* IE double margin bug*/
  13. }
  14. .one{width:40%}
  15. .inner{
  16. background:#fff;
  17. padding:10px 0;
  18. margin:-10px 0;
  19. position:relative;
  20. }

Followed by the simple HTML:

CODE:

  1. <div class="box one">
  2. <div class="inner">
  3. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu.</p>
  4. </div>
  5. </div>

The next step is to provide four elements and place our corners into position with static positioning. We will be leaving a 10px padding around our box so that we have room to position the corners nicely without affecting the inner content. (Don't be tempted to use absolute positioning because IE is always 1px out when the distance traveled is an odd pixel number. This happens on right and bottom absolutely placed elements and can destroy a layout like this.)

I am going to use a div with nested span to provide elements for the corners but if you wanted to reduce mark up you could use a nested "b" element as suggested by Eric Meyer (although its use for background images is not likely to be very semantic). Using a nested b element would also negate the need for a class as you are unlikely to have any other elements like this on your page. Anyway I am sticking with the div and nested span as it is easier to follow.

The HTML we need for this is as follows:

CODE:

  1. <div class="box one">
  2. <div class="inner">
  3. <div class="top"><span></span></div>
  4. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu.</p>
  5. <div class="base"><span></span></div>
  6. </div>
  7. </div>

The extra div and span has been placed inside the .inner element which means we must drag the top corners upwards into the padding area and then outwards into free space so that the transparent corners can show. The reverse process is needed for the bottom corners. There are a couple of "haslayout" bugs to squash on the way and IE6 also needs position relative applied to make the corners show.

The revised CSS and HTML for the whole section is shown below.

CSS:

  1. * {margin:0;padding:0}
  2. h1 {margin:.5em;}
  3. body {
  4. background:#e5e5e5;
  5. color:#000;
  6. }
  7. .box{
  8. float:left;
  9. background:#fff;
  10. padding:0 10px;
  11. margin:10px;
  12. display:inline;/* IE double margin bug*/
  13. }
  14. .one{width:40%}
  15. .inner{
  16. background:#fff;
  17. padding:10px 0;
  18. margin:-10px 0;
  19. min-height:0;/* ie7 haslayout issues fix*/
  20. position:relative;
  21. }
  22. * html .inner{height:1px}/* ie6 haslayout issues fix*/
  23. .top,.base{
  24. margin:-10px -10px 0;
  25. background:url(images/one-round-test2.png) no-repeat left top;
  26. height:10px;
  27. position:relative;
  28. font-size:10px;
  29. }
  30. .base{
  31. background-position:left bottom;
  32. margin:0 -10px -10px;
  33. }
  34. .top span,.base span{
  35. background:url(images/one-round-test2.png) no-repeat right top;
  36. display:block;
  37. height:10px;
  38. font-size:10px;
  39. }
  40. .base span{background-position:right bottom;}

I have also added a content div in the middle just to tidy things up and the revised HTML is as follows:

CODE:

  1. <div class="box one">
  2. <div class="inner">
  3. <div class="top"><span></span></div>
  4. <div class="content">
  5. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed convallis mauris eu ipsum. Proin volutpat facilisis dui. Sed pretium pulvinar arcu.</p>
  6. </div>
  7. <div class="base"><span></span></div>
  8. </div>
  9. </div>

The font-size:10px in the CSS is there to restrict IE's height to 10px; otherwise it would increase the element to the full current font-size and spoil the effect. The result of the above code can be seen in these live examples:

Example 1

Example 2

Example 3

For ease of use the CSS has been left in the head so that you can view source and inspect it easily.

You can read the full tutorial by clicking here.

So go out there and make those non-stylish rectangular boxes into boxes with rounded corners!

[...] Simple Round Corners in CSS By David Hurth The font-size:10px in the CSS is there to restrict IE's height to 10px; otherwise it would increase the element to the full current font-size and spoil the effect. The result of the above code can be seen in these live examples: … Ajaxonomy - The Study of Ajax… - http://www.ajaxonomy.com [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.