The realm of CSS is a realm of boxes. Everything on the page is a box, within a box, within a box. No wonder it’s so common for beginning CSS developers (or, in my case, poor graphic designers with too much CSS experience) to create boxy layouts!
For now, to get the code to work, you’re stuck using proprietary CSS tags: they won’t validate, but they’ll just be ignored by browsers that don’t support them. The code itself is pretty simple; for example, to create a div with nice rounded corners with a radius of 5 pixels, you’d just write something like this:
And this rule will create a div that looks like this:div.rounded {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px; }
The two properties of note here are “-moz-border-radius” and “-webkit-border-radius.” The former is how to specify the radius — number of pixels from a hypothetical center point to the edge of the circle created by the rounded corner (see the image below) — in Mozilla-based browsers. The latter is doing the same thing, but for Safari.
The rule isn’t just limited to curving background colors, either. If you were to add a border to the element, the border would become rounded, as well. For example, a block quote could be styled like so:
Resulting in a block quote that has a lot of style, without relying on images to accomplish the task:blockquote {
margin: 1em 20px;
padding: 10px;
border: 2px solid #555;
background-color: #f2f2f2;
color: #555;
font-size: 140%;
text-align: justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
And finally, you’re also not limited to either all rounded corners or none. Using this property, you can specify which corners you want rounded in your CSS. However, it’s important to note that the Firefox-based version of this rule has deviated a bit from the W3C standard, meaning it’s written slightly differently than the Safari-based rule. For example, consider these two rules used to round out the top-left corner of a box:
It’s a minor difference, in the grand scheme of things, but pretty critical if you want your rounded corners to show up where and how they should! Using the ability to round individual corners, you could generate fancy alert messages: Or, you could apply rounded corners to three of the four edges of a user’s comment, resulting in a pseudo-voice bubble, all without a single image in sight:-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;.alert {
border: 2px solid #fc0;
padding: 8px 10px;
font-size: 120%;
color: #c90;
font-weight: bold;
background-color: #ff9;
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-right-radius: 8px; }
.comment {
border: 1px solid #999;
background-color: #d8d8f4;
margin: 1em 40px;
padding: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px; }
Resorce : http://www.cssnewbie.com/easy-rounded-corners-with-border-radius/comment-page-1/#comment-9212
