CSS: Rounded Corners

Rounded corners in CSS are created using the border-radius property. This property allows you to add rounded corners to elements, which can help create a softer, more modern look.

Basic Usage

The border-radius property can take one or more values, which determine the radius of the corners:

• Single value: Applies the same radius to all four corners.
• Two values: The first value applies to the top-left and bottom-right corners, and the second value applies to the top-right and bottom-left corners.
• Four values: Each value applies to a specific corner in the order: top-left, top-right, bottom-right, bottom-left.

Syntax

border-radius: [value];

Examples

Single Value

div {
    border-radius: 10px; /* All corners will have a 10px radius */
}

Two Values

div {
    border-radius: 10px 20px; /* Top-left and bottom-right have 10px, top-right and bottom-left have 20px */
}

Four Values

div {    border-radius: 10px 20px 30px 40px; /* Top-left 10px, top-right 20px, bottom-right 30px, bottom-left 40px */ }

Advanced Usage

Elliptical Corners

You can create elliptical (oval) corners by specifying two values for each corner: the horizontal radius and the vertical radius.

Syntax

border-radius: horizontal-radius/vertical-radius;

Example

div {    border-radius: 50px/25px; /* Horizontal radius 50px, vertical radius 25px for all corners */ }

• Individual Corner Properties

You can also set the radius for each corner individually using the following properties:

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

Example

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

Combining Rounded Corners with Other Properties

Rounded corners can be used with other CSS properties to create visually appealing elements. For example, combining border-radius with box-shadow and background-color.

Example

div {
    width: 200px;
    height: 100px;
    background-color: #3498db;
    border-radius: 15px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

This example creates a blue rectangle with rounded corners and a subtle shadow.

Practical Uses

• Buttons

button {
    padding: 10px 20px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

• Cards

.card {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

• Images

img {
    border-radius: 50%; /* Makes the image circular if it’s a square */
}

Tips for Using border-radius

• Consistency: Ensure consistent use of rounded corners throughout your design to maintain a cohesive look.
• Performance: Using border-radius is generally performance-friendly, but excessive use on large elements or with high values in animations might have some impact.
• Accessibility: Rounded corners are purely visual and don't affect the accessibility of your content. Ensure your design remains accessible in other aspects.

Using border-radius effectively can enhance the aesthetics of your web pages, making them look more polished and user-friendly.