CSS border radius generator

border radius generator converts the sharp corners to rounded corners. There are four corners of a box i.e. four quadrants. And each quadrant has horizontal and vertical radii. See the following image before using the border radius generator.

border-radius properties for different corners

div {

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;;

}

1. border-top-left-radius

Horizontal radius: 10px

Vertical radius: 10px

2. border-top-right-radius

Horizontal radius: 10px

Vertical radius: 10px

3. border-bottom-right-radius

Horizontal radius: 10px

Vertical radius: 10px

4. border-bottom-left-radius

Horizontal radius: 10px

Vertical radius: 10px

css border generator

css box shadow generator

css text shadow generator