Creating Rounded Corners

The easiest way to create rounded corners on an HTML element is to use the CSS border-radius shorthand property.

Rounding corners is an effective way to modernize a design, making boxes feel softer and more inviting than sharp, square corners. You can use this property on almost any visible element, including div, img, and button.

Basic Rounded Corners

The simplest way to use border-radius is to provide a single value that applies to all four corners:

Creating Circles and Pills

By using different values and units, you can create more than just slightly rounded boxes. You can transform a square into a circle or a rectangle into a "pill" shape.

• Circles: To create a perfect circle, take a square element (where width and height are equal) and set the border-radius to 50%.
• Pills: For a pill shape, set a value that is larger than half of the element's height (e.g., 500px). This will round the ends into perfect semi-circles.

Styling Individual Corners

You don't have to round all corners equally. You can target specific corners by using either the shorthand property, or individual properties like:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

The border-radius shorthand property accepts up to four values, starting from the top-left and moving clockwise:

1. One Value: Applies to all four corners (e.g., 10px).
2. Two Values: Top-left/bottom-right, then top-right/bottom-left (e.g., 10px 50px).
3. Three Values: Top-left, then top-right/bottom-left, then bottom-right (e.g., 10px 30px 50px).
4. Four Values: Top-left, top-right, bottom-right, bottom-left (e.g., 10px 20px 30px 40px).

Here's an example that demonstrates the shorthand property:

Advanced: Elliptical Corners

By using the slash (/) syntax, you can specify horizontal and vertical radii separately to create elliptical corners. The first value is the horizontal radius and the second value is the vertical radius: