CSS Border Radius: Rounded Corner

These would be the keywords that people out there might use to find articles like this: "What Is Border Radius, How To Create Rounded Corner Using CSS Code? Can I make Image, Picture, Thumbnail On My Website Rounded On Corners?"

Well, for your information if you do not know what is border radius or rounded corner, border radius is a CSS3 property whose function is to make "items" rounded on corners. Items that i mean here could be images or any elements, like "div" element for example.

It's not any complicated to style items using border radius property, you only need to know a very few simple rules that won't make you even need to try to commit those into your brain to remember.

Here is an example:

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

The first line means "border radius for webkit", the second line "border radius for mozilla", the third line "border radius for any browser", while "5px" is the value where the higher the value the deeper rounded corner you have. Also, as you see, there are three lines of paramaters in the example code above, which all the three are actually prompting the same command. The reason for this is because some browsers do not yet support the code fully, in case of mozilla and webkit, for the latest versions, those still have some bugs to fix, so it's better to give those separate instructions. That's what i know.

Very well! The example code above is the very basic parameter, now what if you want to make only the bottom side, or top, or top right, or something like that, to be rounded? Well, the following code is the answer.

-webkit-border-top-right-radius:5px; -webkit-border-top-left-radius:10px; -webkit-border-bottom-radius:5px;
-moz-border-radius-topright:5px; -moz-border-radius-topleft:10px; -moz-border-radius-bottom:5px;
border-top-right-radius:5px; border-top-left-radius:10px; border-bottom-radius:5px;

Step further ahead, you can also write the code with shorthand, the following is good example.

-webkit-border-radius:5px 10px 5px 10px;
-moz-border-radius:5px 10px 5px 10px;
border-radius:5px 10px 5px 10px;

The following is another shorthand.

-webkit-border-top-right-radius:5px 10px;
-moz-border-radius-topright:5px 10px;
border-top-right-radius:5px 10px;

There are still some other shorthands if you realy want to learn more, the above examples are the common ways that people likely prefer to use. Here to learn more: http://www.css3.info/preview/rounded-border

#Things to remember

*CSS code moves like clock, means it reads the first value for the top side, as on shorthand: border-radius:5px 10px 15px 20px;
*You can also set the value with percentage instead of number, example: border-radius:1%;
*Most web browsers nowadays support border radius property, except mozilla and webkit, those still have something like bugs, but those can read this command: border-radius:5px;. But microsoft, internet explore, is not yet.
*Suppose that you specify the top right corner while the bottom left corner is not, the bottom left corner will be the same with the top corner. For the top left, use your imagination.

That is it, i've told you all things that you need to know about border radius, if you have any question due to the property, you speak up on comment section.