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