How do I create DIVs with rounded corners

In this post I want to describe a way I use to get a “DIV” with nice rounded corners like this one. This way isn’t something new, but as I noticed it is used not so often as other ways. Let’s go through it and see its advantages and disadvantages.


My notes about about our region with rounded corners are as follows:

  • we cannot use CSS3 as not all browsers support it
  • we would avoid JavaScript use
  • our region should be cross-browser
  • no large background images, our region shouldn’t contain heavy graphics
  • our region should have scalable width
  • our region may have a need to change its color

So, what do we need to get a rounded corners in examples above?

  1. Corner Image

    In the example I use 10×10 px star-image as shown on Figure 1 (note: the real image size is 10×10 px, Figure 1 shows a scaled image):

    Figure 1:

    Figure 2 attempts to explain why our image looks so, think it is pretty self-explaining:

    Figure 2:

  2. CSS

    Listing 1 displays style definition used in our example, class names are self-explanatory, also I included some comments:

    Listing 1:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    
    /* LAYOUT */
    /* the layout doesn't contain any color styles as we will use the layout for areas with different background colors */
    .rounded-corner {
    }
    /* the top "border" of our area */
    .rounded-corner-top {
        position:relative;
        height:5px;
        overflow:hidden;
    }
    /* top left and top right rounded corners */
    .rounded-corner-top-left, .rounded-corner-top-right {
        position:absolute;
        width:10px;
        height:10px;
        left:-5px;
        top:-5px;
    }
    .rounded-corner-top-left {
        margin-left:100%;
    }
    /* the bottom "border" of our area */
    .rounded-corner-bottom {
        position:relative;
        height:5px;
        overflow:hidden;
    }
    /* bottom left and bottom right rounded corners */
    .rounded-corner-bottom-left, .rounded-corner-bottom-right {
        position:absolute;
        width:10px;
        height:10px;
        left:-5px;
        top:0px;
    }
    .rounded-corner-bottom-right {
        margin-left:100%;
    }
    /* the top and bottom "borders" of our area */
    .rounded-corner-top-center, .rounded-corner-bottom-center {
        margin: 0 5px 0 5px;
        position:relative;
        height:5px;
    }
    /* the content div */
    .rounded-corner-content {
        padding: 5px 25px 5px 25px;
    }
    /* SPECIFIC COLOR DEFINITIONS */
    /* DEFAULT BLUE */
    /* we make our defaut area blue */
    .rounded-corner-top-center, .rounded-corner-bottom-center, .rounded-corner-content {
    	background: #6699CC;
    	color:#fff;
    }
    /* note: we use the same background image for all the corners */
    .rounded-corner-top-left, .rounded-corner-top-right, .rounded-corner-bottom-left, .rounded-corner-bottom-right {
        background: transparent url(c.gif) top left no-repeat;
    }
    /* ORANGE */
    /* to have an orange area we just use additional "orange" class and re-define color-specific classes which are childs of "orange" */
    .orange .rounded-corner-top-center, .orange .rounded-corner-bottom-center, .orange .rounded-corner-content {
    	background: #DE7314;
    	color:#fff;
    }
    /* for orange area I use different corners start-image */
    .orange .rounded-corner-top-left, .orange .rounded-corner-top-right, .orange .rounded-corner-bottom-left, .orange .rounded-corner-bottom-right {
        background: transparent url(co.gif) top left no-repeat;
    }
    /* ADDITIONAL WIDTH STYLE */
    /* this is an additional class which specifies width of the orange area */
    .w400 {
    	width:400px;
    }
  3. HTML

    Listing 2:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    
    <div class="rounded-corner">
        <div class="rounded-corner-top">
            <div class="rounded-corner-top-left"></div>
            <div class="rounded-corner-top-right"></div>
            <div class="rounded-corner-top-center"></div>
        </div>
        <div class="rounded-corner-content">
    		<p>
    In this post I want to describe a way I use to get a "DIV" with nice rounded corners like this one. This way isn't something new, but as I noticed it is used not so often than other ways. Let's go through it and see its advantages and disadvantages.
    		</p>
        </div>
        <div class="rounded-corner-bottom">
            <div class="rounded-corner-bottom-left"></div>
            <div class="rounded-corner-bottom-right"></div>
            <div class="rounded-corner-bottom-center"></div>
        </div>
    </div>
    <br />
    <div class="orange rounded-corner w400">
        <div class="rounded-corner-top">
            <div class="rounded-corner-top-left"></div>
            <div class="rounded-corner-top-right"></div>
            <div class="rounded-corner-top-center"></div>
        </div>
        <div class="rounded-corner-content">
    		<p>
    			My notes about about our region with rounded corners are as follows:
    			<ul>
    			<li>we cannot use CSS3 as not all browsers support it</li>
    			<li>we would avoid JavaScript use</li>
    			<li>our region should be cross-browser</li>
    			<li>our region shouldn't contain heavy graphic</li>
    			<li>our region should have scalable width</li>
    			<li>our region may have a need to change its color</li>
    			</ul>
    		</p>
        </div>
        <div class="rounded-corner-bottom">
            <div class="rounded-corner-bottom-left"></div>
            <div class="rounded-corner-bottom-right"></div>
            <div class="rounded-corner-bottom-center"></div>
        </div>
    </div>

To understand better how the example works, you may comment lines 9 and 27 in the Listing 1, then you’ll get something like this:

Figure 3

Conclusion:

The main method advantages are:

  • It provides a cross-browser, scalable area with rounded corners
  • It uses the only lightweight image
  • The existing base can be easily extended in case you need your area to have borders, gradient background, etc

Disadvantages:

  • You have 10 extra DIVs
  • You need a separate corners image for each color

Ready to use corner images: blue, orange.

Note: I used GIF format for the corner images. You can use PNG, however pngFix will be required for correct work in browsers with no PNG support.

This entry was posted on Thursday, February 19th, 2009 at 17:48 and is filed under Webmastering. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.





2 Responses to “How do I create DIVs with rounded corners”

Is it possible to make the div auto-size with the contents? If so, how? what is it about the styles that are defined here that force the blue to 100% of the page width?

Thanks for the great example, by far the simplest implementation I’ve found on this so far and a great idea on hiding parts of a single image to make the rounded corners.

Hi Jon,

I think the answer to your question is in the examples I provided:

.w400 {
width:400px;
}

this class limits the area container to be 400 px wide, if you remove the “w400″ class from the area container (or change 400px to 100%) it will fit 100%.

Leave a Reply


required


required (will not be published)