CSS3 Fillet Effect Border-radius

Fillet effect Border-radius

Border-radius is to add a rounded border to an element.

How to use:

border-radius:10px; /* All corners use rounded corners with a radius of 10px */

border-radius:5px 4px 3px 2px; /* Four RADIUS values are upper-left, upper-right, lower-right, and lower-left corner, clockwise */

Do not think that the value of Border-radius can only be used in px units, you can also use a percentage or em, but compatibility is not very good.

Solid Upper semicircle:

Method: The height is set to half the width and the radius of the upper-left and upper-right corner is the same as the height of the element (greater than is also possible).

div{    height:50px;/* is half the width of */    width:100px;    Background: #9da;    border-radius:50px 50px 0 0;/* radius set at least the value of height */    }

Solid Circle:
Method: Set width and height values to be consistent (that is, squares), and four fillet values are set to half of their values. The following code:

div{    height:100px;/* and Width set consistent */    width:100px;    Background: #9da;    border-radius:50px;/* four rounded values are set to half the width or height of the value */    }

CSS3 Fillet Effect Border-radius