CSS Rounding: Creating Rounded Corners and Shapes

CSS Rounding: Creating Rounded Corners and Shapes

Introduction

CSS allows you to create rounded corners and shapes using the border-radius property. This property can be used to round the corners of elements or create circular and elliptical shapes. In this guide, we'll explore various techniques to achieve rounded effects with practical examples.

Rounded Corners

The border-radius property is used to round the corners of an element. You can specify the radius for each corner individually or apply a uniform radius to all corners:

/* Uniform rounded corners */
.rounded-corners {
    border-radius: 15px;
}
        

Example:

Circle Shape

To create a circular shape, set the border-radius to 50% and ensure the width and height are equal:

/* Circle shape */
.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
        

Example:

Ellipse Shape

To create an elliptical shape, use different values for the width and height, with a border-radius set to half the respective dimensions:

/* Ellipse shape */
.ellipse {
    width: 200px;
    height: 100px;
    border-radius: 100px / 50px;
}
        

Example:

Rounded Borders

You can also round the borders of elements, such as containers or buttons, by applying the border-radius property:

/* Rounded borders */
.rounded-border {
    border: 5px solid #2ecc71;
    border-radius: 25px;
}
        

Example:

Conclusion

The border-radius property in CSS offers a versatile way to create rounded corners and shapes on your web pages. By experimenting with different radius values and dimensions, you can create a variety of rounded effects, from simple rounded corners to complex circular and elliptical shapes. Use these techniques to enhance the visual appeal of your designs and create engaging UI elements. Happy styling!