border-radius
The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.
The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.
This property is a shorthand to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.
Example
<!DOCTYPE HTML> <html> <head> <title>CSS Tutorials</title> <style> div { border-radius:20px; width:200px; height:200px; background-color:#D9FBC4; } </style> </head> <body> <div> border-left-style </div> </body> </html>