? Rounded Corners in CSS

To create rounded corners in CSS, you use the border-radius property. It's a simple yet powerful way to soften the edges of boxes, buttons, images, and other elements.

? Basic Syntax

selector {  border-radius: 10px;}

This gives all four corners a 10px radius.

? Individual Corners

You can control each corner separately:

element {  border-top-left-radius: 10px;  border-top-right-radius: 20px;  border-bottom-right-radius: 30px;  border-bottom-left-radius: 40px;}

Shorthand (clockwise from top-left):

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

? Elliptical Corners (with slashes)

border-radius: 50px / 25px;

• First value = horizontal radius

• Second value = vertical radius

? Real-world Examples

Rounded Button

button {  padding: 10px 20px;  border: none;  background-color: teal;  color: white;  border-radius: 5px;}

Circle Image

img.profile {  width: 100px;  height: 100px;  border-radius: 50%; /* perfect circle */}

? Browser Support

? Widely supported in all modern browsers, including mobile.

Would you like a demo or code playground link to experiment with border-radius visually?