border-radius — round the corners
Rounds each corner. One value = all corners. Four values = top-left, top-right, bottom-right, bottom-left.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
border-radius accepts 1-4 values (clockwise from top-left): 1 value: same on all corners. 2 values: top-left+bottom-right, top-right+bottom-left. 4 values: top-left, top-right, bottom-right, bottom-left. Use 50% on a square element to make a perfect circle. You can also use 'border-top-left-radius' etc. for per-corner control. Elliptical corners: 'border-radius: 20px / 40px' (horizontal / vertical).
✏️ Try these changes
-
Change 12px to 0px→ sharp corners -
Change 12px to 50%→ becomes an ellipse (because element is not square) -
Change to 50px 5px 50px 5px→ leaf-like shape -
Change to 20px / 40px→ elliptical corners (horizontal 20, vertical 40) -
Make width: 100px; height: 100px; and border-radius: 50%→ perfect circle