Border-radius is one of my new favorite additions to CSS 3 and it is already supported in some browsers. Border-radius allows designers to apply radius corners on elements on the page. There are a few drawbacks to this approach.
- Users browsing with IE8 and below and a handful of other browsers (Roughly 50% of your audience), will not see the intended effect. These people will see the content, just without the rounded corners.
- The pixels on the corners do not render out as clean as I would like them, so it may be a good idea to keep any border colors closer in value to the background color.
So, with that in mind I’ll move on.
Example 1:
This is an example of a div using border-radius.
CSS:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border: 1px solid #ccc; padding: 15px;
Example 2:
Maybe we can give it some color and depth.
CSS:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border: 2px solid #5c6528; border-top: 1px solid #8b983c; border-left: 1px solid #8b983c; background-color: #c7db4f; padding: 15px;
Example 3:
Maybe the corners need to be different sizes. I used shorthand below where the sizes start at the top left and work around clockwise. This could also be done like this:
-moz-border-radius-topleft:20px; -webkit-border-top-left-radius: 20px
-moz-border-radius-topright:20px; -webkit-border-top-right-radius: 20px
etc.
CSS:
-moz-border-radius: 20px 20px 40px 40px; -webkit-border-radius: 20px 20px 40px 40px; border: 2px solid #5c6528; border-top: 1px solid #8b983c; border-left: 1px solid #8b983c; background-color: #c7db4f; padding: 20px 20px 40px 20px;
So anyway, I was curious about this and thought what I found might be useful to others.
Read More
