CSS Rounded Corners

Welcome to The Coding College! Rounded corners in CSS are a simple yet powerful design feature that can add elegance and modernity to your web elements. The border-radius property is the key to creating rounded corners, whether subtle or completely circular.

In this guide, we’ll explore how to use CSS to create rounded corners, along with practical examples and best practices.

What is the border-radius Property?

The border-radius property in CSS is used to define the radius of an element’s corners. It works by specifying how much to round each corner, using values in length units (e.g., px, em, %) or other CSS units.

Syntax

selector {
    border-radius: value;
}
  • Value: The amount of rounding for the corners.
    • Single value for all corners.
    • Multiple values for individual corners.

Rounded Corners: Examples

Example 1: Fully Rounded Corners

div {
    border-radius: 10px;
}

Result: All four corners of the div will have a 10px curve.

Example 2: Circular Shape (Perfect Circle)

To create a circular shape, ensure the border-radius is at least 50% of the smallest dimension (width or height).

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: lightblue;
}

Result: A perfect circle.

Example 3: Different Corner Values

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

Result: Each corner of the div will have a unique radius.

Using Shorthand for border-radius

You can use the shorthand version of border-radius to define one, two, three, or four values:

Syntax:

border-radius: [top-left] [top-right / bottom-right] [bottom-left];

Example 1: Uniform Rounding

div {
    border-radius: 20px;
}

Result: All corners are rounded with a 20px radius.

Example 2: Two Values

div {
    border-radius: 20px 10px;
}

Result:

  • Top-left and bottom-right corners have a radius of 20px.
  • Top-right and bottom-left corners have a radius of 10px.

Example 3: Four Values

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

Result:

  • Top-left: 10px
  • Top-right: 20px
  • Bottom-right: 30px
  • Bottom-left: 40px

Example 4: Horizontal and Vertical Radii

You can use the / symbol to specify separate values for horizontal and vertical radii.

div {
    border-radius: 50px / 20px;
}

Result:

  • Horizontal radius: 50px.
  • Vertical radius: 20px.

Practical Examples

1. Rounded Button

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

Result: A button with slightly rounded corners.

2. Rounded Card

.card {
    width: 300px;
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 15px;
}

Result: A card with a soft, modern appearance.

3. Profile Picture Circle

img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

Result: A circular profile picture with consistent aspect ratio.

Best Practices

  • Use Percentages for Proportional Rounding:
    Percentages are great for responsive designs. A value of 50% creates a perfect circle for square elements.
  • Combine with Other Properties:
    Use box-shadow or border to enhance the appearance of rounded corners. 
div {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
  • Test Responsiveness:
    Rounded corners might behave differently on elements with varying dimensions. Always test your design across multiple screen sizes.
  • Use Logical Shorthand:
    For better readability, use the shorthand version when rounding all corners equally.

Browser Compatibility

The border-radius property is supported in all modern browsers. However, if you are targeting very old browsers, consider adding appropriate fallbacks.

Conclusion

The border-radius property is an essential tool for creating visually appealing designs. Whether you’re adding subtle curves or crafting a fully circular element, this property allows you to enhance the aesthetics of your website effortlessly.

Key Takeaways:

  • Use border-radius to round element corners.
  • Experiment with shorthand values for precise control.
  • Combine with responsive units like % for flexible designs.

Explore more CSS tips and tricks at The Coding College and take your web development skills to the next level!

Leave a Comment