ROUND CORNERS! Beautiful, Image-free, Pure CSS, Code Here!

Give your site a design lift with this simple CSS code snippet. Simply choose a radius and drop it in a div for a real easy way to add curves without any images or javascript.

This is super-fast to do and works for all browsers except IE (so there’s a surprise). Still, 60% of the market isn’t bad for a few seconds work.

I’ll write up the IE hack another time, but obviously that will take longer and involve some swearing.

[sniplet guvSellBox]

Round Corners CSS Code

Here’s the snippet, allowing for all good browsers:-

[text]
-moz-border-radius: 16px 16px 16px 16px;
-khtml-border-radius-bottomleft: 16px;
-khtml-border-radius-bottomright: 16px;
-webkit-border-bottom-left-radius: 16px;
-webkit-border-bottom-right-radius: 16px;
border-radius: 16px 16px 16px 16px;
[/text]

.. play with those round corner radius values for larger or smaller round corners.

Now open up the stylesheet and append the style to whatever div box, like so:-

[text]
#someDiv {
background-color:#CCCCCC;
height:250px;
margin:30px;
width:570px;
position:relative;
-moz-border-radius: 16px 16px 16px 16px;
-khtml-border-radius-bottomleft: 16px;
-khtml-border-radius-bottomright: 16px;
-webkit-border-bottom-left-radius: 16px;
-webkit-border-bottom-right-radius: 16px;
border-radius: 16px 16px 16px 16px;
}
[/text]

And you’re good to go.

Be Sociable, Share!

• 

No related posts.