CssHow-ToBeginner · 3 min read

How to Use border-radius in CSS: Simple Guide with Examples

Use the border-radius property in CSS to round the corners of an element's border. You can set one value to round all corners equally or specify up to four values to control each corner individually.

📐

Syntax

The border-radius property accepts one to four length or percentage values to round corners.

One value: rounds all four corners equally.
Two values: first rounds top-left and top-right, second rounds bottom-right and bottom-left.
Three values: first rounds top-left, second rounds top-right and bottom-left, third rounds bottom-right.
Four values: rounds top-left, top-right, bottom-right, and bottom-left corners respectively.

css

/* Syntax examples */
div {
  border-radius: 10px;       /* all corners 10px */
  border-radius: 10px 20px;  /* top-left & top-right 10px, bottom-right & bottom-left 20px */
  border-radius: 10px 20px 30px; /* top-left 10px, top-right & bottom-left 20px, bottom-right 30px */
  border-radius: 10px 20px 30px 40px; /* top-left 10px, top-right 20px, bottom-right 30px, bottom-left 40px */
}

💻

Example

This example shows a blue box with rounded corners using border-radius. The corners are rounded equally with a radius of 20 pixels.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border Radius Example</title>
<style>
  .box {
    width: 150px;
    height: 150px;
    background-color: #007BFF;
    border-radius: 20px;
    margin: 20px;
  }
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Output

A blue square box with smooth rounded corners, each corner curved with a radius of 20 pixels.

⚠️

Common Pitfalls

Common mistakes when using border-radius include:

Using invalid units or missing units (e.g., border-radius: 10; instead of 10px).
Expecting border-radius to work without a visible border or background color.
Confusing the order of values when specifying multiple corners.

Always include units like px or % and ensure the element has visible edges or background to see the effect.

css

/* Wrong: missing units */
div {
  border-radius: 15; /* No unit, won't work */
}

/* Correct: with units */
div {
  border-radius: 15px;
}

📊

Quick Reference

Property	Description	Example Value
border-radius	Rounds all corners equally	15px
border-radius	Rounds top-left & top-right, bottom-right & bottom-left	10px 20px
border-radius	Rounds top-left, top-right & bottom-left, bottom-right	10px 20px 30px
border-radius	Rounds top-left, top-right, bottom-right, bottom-left	10px 20px 30px 40px
border-radius	Uses percentage for relative rounding	50%

✅

Key Takeaways

Use border-radius to create rounded corners on any element.

Specify one to four values to control corner rounding individually.

Always include units like px or % with values.

Ensure the element has visible borders or background to see the effect.

Percent values create elliptical or circular corners relative to element size.