CSS Rounded Corners

CSS allows you to create rounded corners for HTML elements, making your web design more visually appealing. This can be easily achieved using the border-radius property.

Key Concepts

• What is border-radius?
  • The border-radius property defines the radius of an element's corners.
  • It can be applied to all HTML elements except for table elements when border-collapse is set to collapse.
  • <length> can be in pixels (px), ems (em), etc.
  • <percentage> is relative to the element’s dimensions.

Syntax

selector {
    border-radius: <length> | <percentage>;
}

Values for border-radius

Elliptical Radius

.box {
    border-radius: 50px 25px;
}

Specifies two values for horizontal and vertical radii.

Multiple Values

.box {
    border-radius: 10px 20px 30px 40px;
}

Different values for each corner (top-left, top-right, bottom-right, bottom-left).

Single Value

.box {
    border-radius: 10px;
}

Applies the same radius to all four corners.

Examples

Example 1: Basic Rounded Box

<div class="box">Hello, World!</div>
.box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border-radius: 15px;
}

Example 2: Different Rounded Corners

<div class="box2">Rounded Corners</div>
.box2 {
    width: 200px;
    height: 100px;
    background-color: coral;
    border-radius: 20px 10px 5px 0;
}

Conclusion

Utilizing the border-radius property in CSS is a straightforward and effective method to enhance the appearance of your webpage by adding rounded corners to various elements. Experimenting with different values allows you to see how they can positively impact your design!