Here is a quick post for you about a great trick in CSS that allows you to round the corners of boxes without even using images. This is a new feature in CSS3, and is every web designers dream.
A site with all flat edges can get boring and get that boxy look. A website is made of boxes, sure, but it doesn’t hurt to round them! Rounding corners on your boxes can really make your design look a lot better aesthetically and make readers more interested in looking at it. Believe it or not, that one tiny change can really have a huge impact on the look of your blog!
To make corners round in Mozilla based browsers, use this code in your CSS:
-moz-border-radius: 5px;
To make corners round in Webkit based browsers, use this code in your CSS:
-webkit-border-radius: 5px;
- You can make the corners more round by adding to the value, and making the number lower to make it less round
- This technique does not work in all browsers (if you guessed IE then you’re dead on)
- This can sometimes look “off” if you apply it to a background with an image. This is not true for all cases, and can be easy fixed with some margin.
To see some more techniques with this trick, read this article
{ 2 comments… read them below or add one }
Nice easy way to round corners! Cheers for the tip.
That made my search box easier on the eye, thanks. There are loads of tips here that I have implemented on my site, you have a lot to offer.
.-= Ed´s last blog ..Sell your hair =-.