border-radius

border-radius

CSS border-radius Property

The CSS border-radius property specifies roundness for all four corners of HTML display elements. Using this property we can achieve rounded corners, circles and ovals. We can use pixels(8px), percentages(50%), or em(2em) values. The '/' symbol is used to transition the rounded effect. The specific corners are assigned clockwise starting at the top left corner: border-radius: top-left > top-right > bottom-right > bottom-left Set the radius for all four corners independently:

border-radius: 10px 20px 40px 80px;

Set the radius for (top-left + bottom-right) and (top-right + bottom-left) together:

border-radius: 20px 40px;

Apply a uniform radius value to all four corners at once:

border-radius: 20px;

Fully rounded edges for all four corners:

border-radius: 100%;

Transition corner radius using the '/' symbol:

border-radius: 80px / 20px;

click here to code. 

Tweet