CSS border-radius Property

Posted in CSS Tutorial

Updated on Sep 04, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-radius property in CSS is used to create rounded corners on elements.

This property allows you to define how much rounding you want on each corner, which can be applied to all corners uniformly or individually. Rounded corners can add a softer, more modern look to your elements, making your design more visually appealing.

💡 Syntax

The syntax for the border-radius property is simple and flexible. You can specify one, two, three, or four values to define the rounding of the corners.

Syntax

Copied

element {
  border-radius: value;
}

One value: Applies 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.
Three values: The first value applies to the top-left corner, the second to the top-right and bottom-left corners, and the third to the bottom-right corner.
Four values: Each value applies to a different corner in the order: top-left, top-right, bottom-right, and bottom-left.

🎛️ Default Value

The default value of the border-radius property is 0, which means that the element has sharp, right-angled corners.

🏠 Property Values

Value	Description
Length	You can specify a length value (e.g., 10px, 5em) to determine the radius.
Percentage	You can use a percentage (e.g., 50%) to create rounded corners relative to the element's size.
Shorthand	The `border-radius` property can be specified as a single value, two values, three values, or four values to individually control the radius of each corner.

📄 Example

In this example, we'll create a box with rounded corners using the border-radius property.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-radius Example</title>
  <style>
    .rounded-box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      border-radius: 15px;
    }
  </style>
</head>
<body>
  <h1>Box with Rounded Corners</h1>
  <div class="rounded-box"></div>
</body>
</html>

🖥️ Browser Compatibility

The border-radius property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a widely supported feature and can be used safely in your web projects.

🎉 Conclusion

The border-radius property is an essential tool in modern web design, enabling developers to create visually appealing elements with rounded corners.

Whether you’re designing buttons, images, or entire sections, using border-radius can help soften the look of your interface and make your design more inviting. Experiment with different values and combinations to see how this property can enhance the aesthetics of your web pages.