CSS Style center

CSS Styles, CSS tips

Portfolio

css3 rounded corners

CSS 3 has many new methods to do what we have been doing in the hard way before, and one of them is rounded corners for boxes.

The code for this is very simple, it goes like this:

.rounded{
-webkit-border-radius: 5px 4px;
-moz-border-radius: 5px 4px;
border-radius: 5px 4px;
}

the idea is simple, each and every one of these lines refers to different browsers/ different versions of them. but eventually they all will use border-radius at some point sooner or later.
the pixels set the radius of the corner, and it goes clockwise, almost like in margin and padding rules.
It starts from the top left corner to top right then bottom right and bottom left. of course you can shorten it and say that top and bottom left will be x and top and bottom right will be y, like i did in this example.

Posting more soon…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>