Menu
I use div tags to define areas within my web pages. I set all the obvious things like background, size, padding, etc. But it is all very square.
How can I use only CSS to round the corners?
816
Here is a simple HTML document to demo how to achieve it through only CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.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;}
</style>
</head>
<body>
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>
Link to Original: http://blog.yosle.com/2007/09/20/css-round-corners/
60
You would use the border-radius property. However, this is only supported in CSS3, which no browser implements yet. If you only need it to work in a couple browsers you could use -webkit-border-radius and -moz-border-radius which would let it work in Safari and Firefox respectively.
If you are not opposed to using images. Here's s method I came up with for making rounded borders.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
