Rounded Corners in CSS
The border-radius property rounds the corners of an element. A bigger value gives a rounder corner.
.box { border-radius: 12px; }
Output in the browser
12px radius
Different radius for each corner
/* top-left, top-right, bottom-right, bottom-left */
.box { border-radius: 30px 0 30px 0; }
Output in the browser
30px 0 30px 0
Circle and pill shapes
.circle { width: 100px; height: 100px; border-radius: 50%; }
.pill { padding: 8px 24px; border-radius: 999px; }
Output in the browser
Pill button
Note:
A circle needs a box with equal width and height, and border-radius: 50%. Without equal sides you get an oval.
Summary
border-radiusrounds the corners.- One value for all corners, or up to four values for each corner.
- Use
50%for circles. - Next: CSS Shadows.
Congratulations! Chapter Finished. Learn more about the similar topics:
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |