Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Sunday, June 21, 2009

Nifty rounded corners using html and css

Thanks jagdeesh for posting your question to me. Here is the simple way to have rounded corners using css without any images for optimized code.

Rounded border
HTML Code:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="contentb">
<div>Round Border!!</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#fff; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #fff; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

Rounded Fill
HTML Code:

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div>Round fill!!</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

Css Code:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

The first example will give you a rounded corner with border, simply copy the html and css code. The secound example will give you rounded corner with fill but will not have any border. You can custome the code by changing the border or background color.

If you have any doubts or queries, please feel free to contact me. To know about more about rounded corners, please check this article.

Labels: , , ,

11 Comments:

Anonymous Anonymous said...

That's awesome!! I never knew this before. thanks!

December 18, 2009 at 11:17:00 AM PST  
Blogger tiger00555 said...

works great, thanks....

February 17, 2010 at 5:56:00 AM PST  
Anonymous Anonymous said...

nice 1..............

October 5, 2010 at 12:34:00 AM PDT  
Blogger Unknown said...

What if you want to only have 2 corners round? How do you know which class covers which corners?

April 22, 2011 at 12:29:00 PM PDT  
Anonymous Anonymous said...

How would I apply this to images in blogger? I've been searching the web, and honestly, Not finding much for just images. I don't want to use photoshop because of the tediousness. Thanks for writing this post, it's been the most helpful I've found so far!

July 2, 2011 at 12:31:00 PM PDT  
Anonymous Kash said...

Thanks..This is really awesome. You have saved my life..Cheers

February 7, 2012 at 2:10:00 AM PST  
Anonymous Omega softwares said...

This is really very important code for website designers.Web Designing in Mumbai and Website Development

December 29, 2014 at 12:22:00 AM PST  
Anonymous Omega softwares said...

Thank you for sharing...i really good to see this post.nice article.
CMS Website Developer and Web Designing


December 29, 2014 at 12:55:00 AM PST  
Blogger Unknown said...

Really Nice Information,Thank You Very Much For Sharing.
Wordpress Development Company

May 6, 2015 at 6:40:00 AM PDT  
Anonymous Anonymous said...

Hi ,
Nice article.Thank you for sharing the information.I really glad enjoy read that topic.I appreciate post for your.
Graphic design agencies edinburgh

June 29, 2016 at 2:29:00 AM PDT  
Blogger Đồ gia dụng said...

This comment has been removed by a blog administrator.

April 27, 2019 at 3:05:00 AM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home