Pure CSS rounded corners without images and javascript
In this article I will show you how to make a rounded corner boxes without using images or javascript. We will use pure CSS2 only. However, some browsers support border radius property of CSS3.
This trick will apply to all browsers including IE6 which is know as headache for web developers.
<style type="text/css"> .container { display: block; } .content { background: #ccc; } .round_span3 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 3px; } .round_span2 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 2px; } .round_span1 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 1px; } </style> <div class="container"> <span class="round_span3"></span> <span class="round_span2"></span> <span class="round_span1"></span> <div class="content"> <!-- Content goes here --> My name is Bond <br/> James Bond </div> <span class="round_span1"></span> <span class="round_span2"></span> <span class="round_span3"></span> </div>
Now you can make rounded corders using pure CSS that is consistent across browsers.
UPDATE: For bigger radius, increase number or span tags below and above with different class and increase margin to its css like this:For more radius: <div class="container"> <span class="round_span7"></span> <span class="round_span6"></span> <span class="round_span5"></span> <span class="round_span4"></span> <span class="round_span3"></span> <span class="round_span2"></span> <span class="round_span1"></span> <div class="content"> <!-- Content goes here --> My name is Bond <br/> James Bond </div> <span class="round_span1"></span> <span class="round_span2"></span> <span class="round_span3"></span> <span class="round_span4"></span> <span class="round_span5"></span> <span class="round_span6"></span> <span class="round_span7"></span> </div> CSS: <style type="text/css"> .container { display: block; } .content { background: #ccc; } .round_span7 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 7px; } .round_span6 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 6px; } .round_span5 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 5px; } .round_span4 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 4px; } .round_span3 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 3px; } .round_span2 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 2px; } .round_span1 { background: #ccc; display: block; line-height: 1px; overflow: hidden; height: 1px; margin: 0 1px; } </style>








Comments on this post
Very Nice but how i can increase the radius
yes i also want to increase the radius and set the border of box
Something is not working with changing the radius. Or am I doing something wrong? Can you give and explanation step but step please?
Hello,
Same Questing as a Zenmed.
Can you suggest some modification in css,so we can increase/decrease radius.
Thanks
This works fine until you put tags in the content area. Then it breaks.
I have just tested it, it works fine on all browsers, except IE8... Darn... Do you have any suggestions?