Dan Fergus Design > Student Resources > Syllabus > Rounded Corners

Des•301 Advanced Web Design

Rounded Corner Boxes

According to author Andy Budd, one of the early criticisms of CSS-based designs was that they were dull an boxy. As a response, several techniques were developed to add curved corners to frames and boxes, giving the pages a more organic feel. These proved to be very popular; in fact it's difficult these days to find a professional Web site that does not use rounded corners somewhere!

Here are a few variations on the method, based on the ones found in Andy Budd's CSS Mastery.

Fixed-Width Box with Rounded Corners

These are the easiest to create since they only require two graphics. For this exercise you can create your own or use these.

1. Put your images in your root folder.
2. Create a new html page.
3. Add some content like this:

<div class="box">
<h2>Lorem Ipsum</h2>
<p>Dolor sit amet, consectetuer adipiscing elit. Proin vene natis turpis ut quam. In dolor. Nam ultrices nisl sol licitudin sapien. Ut lacinia aliquet ante.</p>

</div>

4. To create the box and corners, add the following styles (note the url I use; you may have to adjust yours depending on where you put your images).

.box {
width: 274px;
background: #effce7 url(images/bottomSm.png) no-repeat left bottom;
}

.box h2 {
background: url(images/topSm.png) no-repeat left top;
}

Note that we attach the graphic containing the bottom curves to the <div> tag using a class style. The top graphic can't be put on the same object because an element can have only one background image. So instead we hang the top curves on the top-most element within the box, in this case the heading-2. If you put something in your box that precedes the <h2>, you should attach the top graphic to that element instead.


5. Okay we have the corners, but it feels a but crowded. Lets add some padding (new code in red):

.box h2 {
background: url(images/topSm.png) no-repeat left top;
padding: 10px 20px 0 20px;
}

.box p {
padding: 0 20px 10px 20px;
}

Fancier Fixed Width Box

Here's a variation with one slight alteration. Instead of a flat fill color, we're using a gradient 'glow' effect. It works almost the same as the previous box, except that we have a third graphic to created the background fill. The 'minutemen' graphic is attached to the <div>, and the bottom curves are moved to a different element (the bottom-most element in the box).

1. Download these graphics. You can create your own, but you may want to see how these are structured.
2. Put the images in your root folder.
3. Markup the box. You can use the same html page we created for the last box. Note that this code is almost identical to the last box with two important differences (seen in red):

<div class="box2">
<h2>Lorem Ipsum</h2>
<p class="last">Dolor sit amet, consectetuer adipiscing elit. Proin vene natis turpis ut quam. In dolor. Nam ultrices nisl sol licitudin sapien. Ut lacinia aliquet ante.</p>

</div>

The class="last" attribute needs to go in the bottom-most element in the box. In this case it's the paragraph; but if you add to or change the content, you'll have to move the "last" attribute down to the bottom.

4. The css rules are also similar to the ones we used before, but note the changes below:

.box2 {
width: 280px;
background: url(images/tile2sm.png) repeat-y;
}

.box2 h2 {
background: url(images/top2sm.png) no-repeat left top;
padding-top: 20px;
}

.box2 .last {
background: url(images/bottom2sm.png) no-repeat left bottom;
padding-bottom: 20px;
}

.box2 h2, .box2 p {
padding-left: 20px;
padding-right: 20px;
}

Flexible Rounded-Corner Box

The first two boxes we created are not scalable, that is they won't grow in width if the user enlarges the text on his/her browser. Truly accessible Web pages should contain scalable elements—including columns and text boxes. This third method creates a scalable (flexible) box by using four separate components—a separate graphic for each corner (one of which also contains the box background).

1. Once again create new graphics or use the ones provided.
2. For this method to work, we need to create a few more <div> elements to hang out styles on:

<div class="box3">
<div class="box-outer">
<div class="box-inner">
<h2>Lorem Ipsum</h2>
<p>Dolor sit amet, consectetuer adipiscing elit. Proin vene natis turpis ut quam. In dolor. Nam ultrices nisl sol licitudin sapien. Ut lacinia aliquet ante.</p>
</div><!-- ends box-inner -->
</div><!-- ends box-outer -->

</div><!-- ends box3 -->

Granted, all these extra <div> tags is not ideal, but it's necessary for this method to work (for a solution that uses JavaScript and the DOM to create the extra <div> tags on the fly, see http://tinyurl.com/82y81). Note that I also added a few comments to help you keep the closing </div> tags straight.


3. The CSS is similar to what we've done before, but now we have four background images to attach:

.box3 {
width: 17em;
background: #effce7 url(images/bottom-left.gif) no-repeat left bottom;
}

.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}

.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}

.box3 h2{
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}

.box3 h2, .box3 p {
padding-left: 5%;
padding-right: 5%;
}

CSS3

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. If you see rounded corners on the box to the right, your browser has implemented the border-radius option. Warning: as of this writing, Internet Expolrer does not support rounded corners. Given that they control over 80% of the market, should you choose to use this method, most people won't see your rounded corners (they will see regular rectangles).

Once again we'll start with a simple box:

<div class="box4">
<h2>Lorem Ipsum</h2>
<p>Dolor sit amet, consectetuer adipiscing elit. Proin vene natis turpis ut quam. In dolor. Nam ultrices nisl sol licitudin sapien. Ut lacinia aliquet ante.</p>

</div>

Now the CSS code:

.box4 {
width: 17em;
background-color: #eee;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #ccc;
padding: 10px;
}

Course Outline

Syllabus

Student Resources