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>
<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>
<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: , , ,


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 James 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 Omega software said...

This post is very helpful, edifying and in addition cool thoughts on the topic. It's very encouraging to find this site, can't wait to check out new stuff you post. CMS website development company || Web Designing || Website Development

January 7, 2015 at 11:58:00 PM PST  
Blogger Omega software said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck. Website Development in Mumbai || CMS Website Developer || Website Maintenance in Mumbai

January 7, 2015 at 11:58:00 PM PST  
Blogger Albert Andrada said...

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

May 6, 2015 at 6:40:00 AM PDT  
Blogger Suseela Susiee said...

Great and useful article. Creating content regularly is very tough. Your points are motivated me to move on.

SEO Company in Chennai

June 22, 2016 at 7:15: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 Philips Huges said...

Its a wonderful post and very helpful, thanks for all this information. You are including better information regarding this topic in an effective way.Thank you so much

Personal Installment Loans
Title Car loan
Cash Advance Loan

August 21, 2017 at 6:55:00 AM PDT  
Blogger Patrick Co Eban said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from HTML5 CSS3 Javascript Online Training from India . or learn thru HTML5 CSS3 Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. HTML5 CSS3 Javascript Online Training from India

April 2, 2018 at 4:18:00 AM PDT  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home