Rounded corners add a nice little design to any page – using rounded corners can be image heavy; So, this post I am going to show you how to make rounded corners using only CSS! This is such a neat little trick and can be very handy.

There are a lot of different methods to make rounded corners – you can use images, JavaScript, CSS or a combination of all three! I am going to make this simple and show you how to make the rounded corners using nothing but CSS. The rounded corners are made using a layering technique – you use <b> (bold) tags and layer them on top of each other to create the rounded corner effect.

box1.gif

The HTML

<b class=”b1″></b><b class=”b2″></b><b class=”b3″></b><b class=”b4″></b>
<div class=”content”>
<div>content here</div>
</div>
<b class=”b4″></b><b class=”b3″></b><b class=”b2″></b><b class=”b1″></b>

The CSS .b1, .b2, .b3, .b4 {font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#000; margin:0 5px;}
.b2 {height:1px; background:#000; margin:0 3px;}
.b3 {height:1px; background:#000; margin:0 2px;}
.b4 {height:2px; background:#000; margin:0 1px;}
.content {background: #000;}
.content div {margin-left: 5px; color: #FFF;}

..and of course the speech bubble!

bubble.gif

The HTML

<div class=”bubble”>
<b class=”b1″></b><b class=”b2″></b><b class=”b3″></b><b class=”b4″></b>
<b class=”b5″></b><b class=”b6″></b><b class=”b7″></b>
<div class=”content”>
<p><strong>content here</strong></p>
</div>
<b class=”b7″></b><b class=”b6″></b><b class=”b5″></b><b class=”b4″></b>
<b class=”b3″></b><b class=”b2″></b><b class=”b1″></b>
<span class=”s1″></span><span class=”s2″></span>
</div>

The CSS

.bubble {background: transparent; margin:1em;}

.bubble span.s1 {display:block; width:0; height:0; color:#999; overflow:hidden;
border-top:12px solid #000; border-left:12px dotted transparent; border-right:12px dotted
transparent; margin-left:50px;}

.bubble span.s2 {display:block; width:0; height:0; color:#000; overflow:hidden;
border-top:10px solid #999; border-left:10px dotted transparent; border-right:10px dotted
transparent; margin-left:52px; margin-top:-15px;}

.b1, .b2, .b3, .b4, .b5, .b6, .b7 {display:block; overflow:hidden; font-size:0;}
.b1, .b2, .b3, .b4, .b5, .b6 {height:1px;}
.b4, .b5, .b6, .b7 {background:#999; border-left:1px solid #000; border-right:1px solid #000;}

.b1 {margin:0 8px; background:#000;}
.b2 {margin:0 6px; background:#000;}
.b3 {margin:0 4px; background:#000;}
.b4 {margin:0 3px; background:#999; border-width:0 5px;}

.b5 {margin:0 2px; background:#999; border-width:0 4px;}
.b6 {margin:0 2px; background:#999; border-width:0 3px;}
.b7 {margin:0 1px; background:#999; border-width:0 3px; height:2px;}

.content {display:block; background:#999; border:3px solid #000; border-width:0 3px;
color: #FFF;}