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.
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!
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;} |
More HTML and CSS: 
