ankitweblogic logo
W e b t u t o r i a l s

Define CSS

CSS Comment

CSS Selectors

Types of CSS

CSS Color Property

CSS Font Property

CSS Background

CSS Box Model

CSS3 Border Radius

Styling HTML Table

Styling Links

CSS Menu

CSS Display and Visibility

CSS Overflow Property

CSS Position, Z-index

CSS Outline, Offset

CSS Cursor Property

CSS3 box-sizing

CSS Web Layout

CSS Website

Google Fonts

Google Map

Login Form

Google Page

Facebook Page

CSS Assignment List

CSS3 border-radius

CSS3 border-radius property is used to round the corners of any HTML element.

Syntax: border-radius: 20px;

Example: Round the div corners.

If you specify only one value in the border-radius property, then it will be applied to all four corners. However, you can specify each corner value separately or different values of all corners, like this:
border-bottom-left-radius :10px;

You can apply border-radius property like this:
1. Four values - first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner.
border-radius: 15px 50px 30px 5px;

2. Three values - first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right.
border-radius: 15px 50px 30px;

3. Two values - first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner.
border-radius: 15px 50px;

4. border can also be given as [horizontal radius] / [vertical radius];
border-radius: 50px/15px;

5. border-radius: 15px/50px;

6. border-radius: 40px/100px;
7. border-radius: 50%;