How To Use Only Css To Round My Div Tag Area's Corners?

April 21, 2024 Post a Comment

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 t

Solution 1:

Here is a simple HTML document to demo how to achieve it through only CSS.

<!DOCTYPE HTMLPUBLIC"-//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:05px;}
.b2f {height:1px; background:#ddd; margin:03px;}
.b3f {height:1px; background:#ddd; margin:02px;}
.b4f {height:2px; background:#ddd; margin:01px;}
.contentf {background: #ddd;}
.contentfdiv {margin-left: 5px;}
        </style></head><body><bclass="b1f"></b><bclass="b2f"></b><bclass="b3f"></b><bclass="b4f"></b><divclass="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><bclass="b4f"></b><bclass="b3f"></b><bclass="b2f"></b><bclass="b1f"></b></body></html>

Link to Original: http://blog.yosle.com/2007/09/20/css-round-corners/

Solution 2:

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.

Solution 3:

-moz-border-radius will get you rounded corners in all versions of Firefox. More helpful info at the Sitepoint CSS Reference.

border-radius will get you rounded corners in Safari 3. More info on border-radius at the CSS 3 Spec.

Solution 4:

If by "only CSS" you mean "without JavaScript" then you can surely add background images with round corners to your elements. You may need extra markup in this case depending on how much flexibility you need.

Considering that you cannot use multiple background images yet, I think using a single image is the best only CSS option.

If you can use JavaScript, then you may want to check out Nifty Corners Cube. I mention this because it works even on top of images and supports transparency.

Solution 5:

Ask google about "css rounded corners no images" and you'll find many, many examples of how to do it.

Personally, I like the methods based on manipulating margins to draw the curve line-by-line, despite the amount of noise they produce in the page source, because they're the most flexible and can draw any shape of edge. If you're only interested in actual rounded corners (i.e., using a 90-degree circular arc), there's a much more compact solution based on some trickery with a carefully-positioned bullet.

Stack in Html5