May
7
Written by:
Steve Patterson
5/7/2009 2:11 PM
CSS Rounded Corners
I have been creating my own rounded corners using a table structure and 6 images on a couple of web sites that we are building. But I started to wonder if there was an easier way to round corners without all the images and etc. Today I came across benogle and his CSS Rounded Corners demonstration which is one really nice way to create what used to require quite a bit of image slicing.
He creates a number of classes with each class having a slightly smaller margin. Then combine the different classes utilizing a bold tag with the content in div tags. Here is a simple example:
.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;}<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>
Tags:
8 comment(s) so far...
Re: CSS Rounded Corners
A nice solution.
Hopefully soon we'll be able to use the CSS only method once enough people move on from the older browsers...
By cookery blog on
5/12/2009 6:53 AM
|
Re: CSS Rounded Corners
Most codes I usually find are the ones that would require me to download softwares, and I don't like that. Thank you for this post :-)
By precious_19b on
5/12/2009 7:34 PM
|
Re: CSS Rounded Corners
I have been working with this code a lot this week. I made some modifications and also recreated the html code in aspx code. Very interesting.
By Steve on
5/14/2009 4:40 PM
|
Re: CSS Rounded Corners
It would be interesting to see the updates you have made.
The code already looks pretty tidy.
By email marketing software on
5/15/2009 10:42 AM
|
Re: CSS Rounded Corners
You are voted!!
Track back from WebDevVote.com
By WebDevVote.com on
6/15/2009 5:14 AM
|
Houston car classifieds
This is really a nice and good way to create rounded corners without using images. Excellent post
By smith on
7/10/2009 3:04 AM
|
Re: CSS Rounded Corners
Hopefully soon we'll be able to use the CSS only method once enough people move on from the older browsers..
By club penguin cheats on
12/13/2009 5:40 AM
|
Re: CSS Rounded Corners
The new rounded corner support with VS 2010 is something everyone is looking forward to.
By Steve on
12/13/2009 6:24 PM
|