TUTORIAL: Content Containers with Rounded Corners

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

This is a demonstration of creating content containers with rounded corners using simple graphics and CSS. It assumes a good understanding of HTML and CSS.

Introduction

Rounded corners on content containers can be implemented in many ways. Using <div> elements as containers, minimal graphics and a small bit of extraneous markup, we can create this effect. Further, our containers will be able to expand and contract depending on the quantity of content. This strategy can be expanded upon to create even more complex effects.

Let's start with an XHTML document in its simplest form.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>    
    <title>My Website</title>
</head>
 
<body>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>    
  4.     <title>My Website</title>
  5. </head>
  6.  
  7. <body>
  8. </body>
  9. </html>


Basic Page Structure

Let's create an overall container for this object and give it a unique identifier. We'll make it 50% of the width of the viewable area and have it situated in the center. For this demonstration, we'll define our styles in the <head> of our document.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>    
    <title>My Website</title>
    <style type="text/css">
        #block_container{width:50%;margin:0 auto;}
    </style>

</head>
 
<body>
    <div id="block_container">
   
    </div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>    
  4.     <title>My Website</title>
  5.     <style type="text/css">
  6.         #block_container{width:50%;margin:0 auto;}
  7.     </style>
  8. </head>
  9.  
  10. <body>
  11.     <div id="block_container">
  12.    
  13.     </div>
  14. </body>
  15. </html>


The Box with Rounded Corners

Now let's build our actual box. There will be a stack of 3 vertical components to this box; Top, middle and bottom.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>    
    <title>My Website</title>
    <style type="text/css">
        #block_container{width:50%;margin:0 auto;}
        .box_top{}
        .box_middle{}
        .box_bottom{}

    </style>
</head>
 
<body>
    <div id="block_container">
        <div class="box_top"></div>
        <div class="box_middle"></div>
        <div class="box_bottom"></div>

    </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>    
  4.     <title>My Website</title>
  5.     <style type="text/css">
  6.         #block_container{width:50%;margin:0 auto;}
  7.         .box_top{}
  8.         .box_middle{}
  9.         .box_bottom{}
  10.     </style>
  11. </head>
  12.  
  13. <body>
  14.     <div id="block_container">
  15.         <div class="box_top"></div>
  16.         <div class="box_middle"></div>
  17.         <div class="box_bottom"></div>
  18.     </div>
  19. </body>
  20. </html>


We'll set up the left-top and left-bottom corners with their fillets. I've created graphics for both of these, as shown below.

Attachments:
top-rail.gif

Top Rail


Attachments:
bot-rail.gif

Bottom Rail



These graphics are 1600 pixels wide and 10 pixels tall. They can fill a great deal of horizontal display area without repeating. As they are black and white GIFs, their file size is nominal.

We'll insert these into our style definitions like so...

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>    
    <title>My Website</title>
    <style type="text/css">
        #block_container{width:50%;margin:0 auto;}
        .box_top{background:url(top-rail.gif);height:10px;overflow:hidden;}
        .box_middle{}
        .box_bottom{background:url(bot-rail.gif);height:10px;overflow:hidden;}
    </style>
</head>
 
<body>
    <div id="block_container">
        <div class="box_top"></div>
        <div class="box_middle"></div>
        <div class="box_bottom"></div>
    </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>    
  4.     <title>My Website</title>
  5.     <style type="text/css">
  6.         #block_container{width:50%;margin:0 auto;}
  7.         .box_top{background:url(top-rail.gif);height:10px;overflow:hidden;}
  8.         .box_middle{}
  9.         .box_bottom{background:url(bot-rail.gif);height:10px;overflow:hidden;}
  10.     </style>
  11. </head>
  12.  
  13. <body>
  14.     <div id="block_container">
  15.         <div class="box_top"></div>
  16.         <div class="box_middle"></div>
  17.         <div class="box_bottom"></div>
  18.     </div>
  19. </body>
  20. </html>


We've defined our overflow as hidden. This will force the <div> to display only the height we defined, 10px.
Our markup should render like Figure 1.

Attachments:
roundCorners1.gif

Figure 1



Now lets add the fillets on the top-right and bottom-right. To do this, we'll be floating empty containers within the "box_top" and "box_bottom" elements.

I've created the graphics for these elements.

Attachments:
top-cap.gif

Top Cap


Attachments:
bot-cap.gif

Bottom Cap



Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>    
    <title>My Website</title>
    <style type="text/css">
        #block_container{width:50%;margin:0 auto;}
        .box_top{background:url(top-rail.gif);height:10px;overflow:hidden;}
        .box_middle{}
        .box_bottom{background:url(bot-rail.gif);height:10px;overflow:hidden;}
        .cap_top{float:right;width:10px;height:10px;background:url(top-cap.gif);}
        .cap_bottom{float:right;width:10px;height:10px;background:url(bot-cap.gif);}

    </style>
</head>
 
<body>
    <div id="block_container">
        <div class="box_top">
            <div class="cap_top"></div>
        </div>
        <div class="box_middle"></div>
        <div class="box_bottom">
            <div class="cap_bottom"></div>
        </div>
    </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>    
  4.     <title>My Website</title>
  5.     <style type="text/css">
  6.         #block_container{width:50%;margin:0 auto;}
  7.         .box_top{background:url(top-rail.gif);height:10px;overflow:hidden;}
  8.         .box_middle{}
  9.         .box_bottom{background:url(bot-rail.gif);height:10px;overflow:hidden;}
  10.         .cap_top{float:right;width:10px;height:10px;background:url(top-cap.gif);}
  11.         .cap_bottom{float:right;width:10px;height:10px;background:url(bot-cap.gif);}
  12.     </style>
  13. </head>
  14.  
  15. <body>
  16.     <div id="block_container">
  17.         <div class="box_top">
  18.             <div class="cap_top"></div>
  19.         </div>
  20.         <div class="box_middle"></div>
  21.         <div class="box_bottom">
  22.             <div class="cap_bottom"></div>
  23.         </div>
  24.     </div>
  25. </body>
  26. </html>


Now our page should render like Figure 2.

Attachments:
roundCorners2.gif

Figure 2



The last thing we need to do to complete our illusion is to deal with the "box-middle" container, where our copy will actually reside. The good news is, we don't have to use graphics. We'll simply add border definitions.

Code: [ Select ]
#box_middle{border-left:1px solid #000;border-right:1px solid #000;clear:both;}


I've also added a "clear:both" directive to ensure this <div> isn't affected by the float from the previous <div>.

Some Lorem Ipsum...

We won't be able to observe our box in action until we add some content, so let's turn to our old friend, Lorem Ipsum.

Code: [ Select ]
<div class="box_middle">
    <h1>Lorem Ipsum Dolor Sit Amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
    <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>

</div>
  1. <div class="box_middle">
  2.     <h1>Lorem Ipsum Dolor Sit Amet</h1>
  3.     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
  4.     <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>
  5. </div>


We'll also need to define the margins and paddings for the text elements. I'll set the margins to 0 so the block-level items butt-up against one another and I'll set the padding to 10px so there's a little negative space around the text, itself.

Code: [ Select ]
h1{margin:0;padding:10px;}
p{margin:0;padding:10px;}

  1. h1{margin:0;padding:10px;}
  2. p{margin:0;padding:10px;}


Our page should render as seen in Figure 3.

Attachments:
roundCorners3.gif

Figure 3



Conclusion

In this demonstration we've implemented rounded corners using only nominal graphics and extraneous markup. Once we've done this, we're free to start using our containers over and over.

As an example of this, I'll include one last pass at the markup to demonstrate the reusabilty and flexibility of these containers. ( View this markup at http://www.myirmo.com/stretchDiv/ )

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>    
    <title>My Website</title>
    <style type="text/css">
        h1{margin:0;padding:10px;}
        h2{margin:0;padding:10px;}
        p{margin:0;padding:10px;}
        #block_container{width:50%;margin:0 auto;}
        #left_column{float:left;width:60%;}
        #right_column{float:left;width:40%;}
        .box_top{background:url(top-rail.gif);height:10px;overflow:hidden;margin:5px 5px 0 5px;}
        .box_middle{border-left:1px solid #000;border-right:1px solid #000;clear:both;margin:0 5px 0 5px;}
        .box_bottom{background:url(bot-rail.gif);height:10px;overflow:hidden;margin:0 5px 5px 5px;}
        .cap_top{float:right;width:10px;height:10px;background:url(top-cap.gif);}
        .cap_bottom{float:right;width:10px;height:10px;background:url(bot-cap.gif);}
    </style>
</head>
 
<body>
    <div id="block_container">
        <div id="left_column">
            <div class="box_top">
                <div class="cap_top"></div>
            </div>
            <div class="box_middle">
                <h1>Lorem Ipsum Dolor Sit Amet</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
                <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>
            </div>
            <div class="box_bottom">
                <div class="cap_bottom"></div>
            </div>
        </div>
        <div id="right_column">
            <div class="box_top">
                <div class="cap_top"></div>
            </div>
            <div class="box_middle">
                <h2>Lorem Ipsum Dolor Sit Amet</h2>
                <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor.</p>
            </div>
            <div class="box_bottom">
                <div class="cap_bottom"></div>
            </div>
            <div class="box_top">
                <div class="cap_top"></div>
            </div>
            <div class="box_middle">
                <h2>Fusce placerat erat at dui</h2>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
            </div>
            <div class="box_bottom">
                <div class="cap_bottom"></div>
            </div>
        </div>
    </div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>    
  4.     <title>My Website</title>
  5.     <style type="text/css">
  6.         h1{margin:0;padding:10px;}
  7.         h2{margin:0;padding:10px;}
  8.         p{margin:0;padding:10px;}
  9.         #block_container{width:50%;margin:0 auto;}
  10.         #left_column{float:left;width:60%;}
  11.         #right_column{float:left;width:40%;}
  12.         .box_top{background:url(top-rail.gif);height:10px;overflow:hidden;margin:5px 5px 0 5px;}
  13.         .box_middle{border-left:1px solid #000;border-right:1px solid #000;clear:both;margin:0 5px 0 5px;}
  14.         .box_bottom{background:url(bot-rail.gif);height:10px;overflow:hidden;margin:0 5px 5px 5px;}
  15.         .cap_top{float:right;width:10px;height:10px;background:url(top-cap.gif);}
  16.         .cap_bottom{float:right;width:10px;height:10px;background:url(bot-cap.gif);}
  17.     </style>
  18. </head>
  19.  
  20. <body>
  21.     <div id="block_container">
  22.         <div id="left_column">
  23.             <div class="box_top">
  24.                 <div class="cap_top"></div>
  25.             </div>
  26.             <div class="box_middle">
  27.                 <h1>Lorem Ipsum Dolor Sit Amet</h1>
  28.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
  29.                 <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor. Sed justo dolor, ornare sed, tempus sit amet, tristique at, lectus. Nulla hendrerit vehicula erat. Duis venenatis cursus enim. Vivamus sodales neque eget erat. Duis sed orci quis orci consequat gravida. Nullam tempor, quam vel fringilla rhoncus, erat est eleifend nibh, vitae varius purus erat a mauris.</p>
  30.             </div>
  31.             <div class="box_bottom">
  32.                 <div class="cap_bottom"></div>
  33.             </div>
  34.         </div>
  35.         <div id="right_column">
  36.             <div class="box_top">
  37.                 <div class="cap_top"></div>
  38.             </div>
  39.             <div class="box_middle">
  40.                 <h2>Lorem Ipsum Dolor Sit Amet</h2>
  41.                 <p>Fusce placerat erat at dui. Aenean facilisis, ipsum eget ullamcorper ultricies, justo nisl ultricies risus, at gravida orci nulla quis mi. Nunc iaculis nisi euismod urna. Ut non eros in nisl imperdiet ornare. Quisque hendrerit tortor ac quam. Maecenas in velit. Aliquam id enim a sem porttitor posuere. Sed id purus. In mauris. Vestibulum dui nunc, convallis nec, venenatis ut, dignissim sit amet, leo. Suspendisse in nunc in orci molestie blandit. Suspendisse fermentum quam sed lorem. Suspendisse tincidunt, lorem at vestibulum eleifend, nisi quam gravida leo, in molestie arcu nisi quis neque. Donec a dolor.</p>
  42.             </div>
  43.             <div class="box_bottom">
  44.                 <div class="cap_bottom"></div>
  45.             </div>
  46.             <div class="box_top">
  47.                 <div class="cap_top"></div>
  48.             </div>
  49.             <div class="box_middle">
  50.                 <h2>Fusce placerat erat at dui</h2>
  51.                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna. Sed vel purus. Nunc interdum pharetra ligula. Phasellus at justo nec arcu ultricies blandit. Fusce elementum nisl id nisi. In hac habitasse platea dictumst. Nulla id tortor. Cras vitae neque id elit facilisis pretium. Sed a lacus. Aliquam sapien nibh, pharetra et, faucibus quis, blandit ac, libero.</p>
  52.             </div>
  53.             <div class="box_bottom">
  54.                 <div class="cap_bottom"></div>
  55.             </div>
  56.         </div>
  57.     </div>
  58. </body>
  59. </html>


You can see the same technique used to created content boxes with drop-shadows here, http://www.myirmo.com/stretchDiv2/

Please PM me with any suggestions for improving this tutorial.

Thanks!
dM
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Not an improvement, but definitely worth reading:
http://www.spiffycorners.com/
http://www.cssjuice.com/25-rounded-corn ... -with-css/
  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 127

Post 3+ Months Ago

I know this is an older tutorial, but now that I'm all about simplicity in my trials and errors of creating mobile versions of some websites, just wanted to say thanks for some of the ideas that just came to mind, reading this.

Post Information

  • Total Posts in this topic: 3 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 5 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.