CssHow-ToBeginner · 3 min read

How to Create Rounded Corners in CSS: Simple Guide

To create rounded corners in CSS, use the border-radius property. You can set it with a length or percentage value to control how round the corners appear.

📐

Syntax

The border-radius property controls the roundness of an element's corners. You can specify one to four values to set the radius for each corner.

border-radius: 10px; sets all corners to 10 pixels radius.
border-radius: 10px 5px; sets top-left and bottom-right to 10px, top-right and bottom-left to 5px.
border-radius: 10px 5px 15px 0; sets each corner individually in clockwise order starting from top-left.

css

/* Basic syntax examples */
div {
  border-radius: 10px; /* all corners rounded equally */
}
div {
  border-radius: 10px 5px; /* top-left & bottom-right 10px, top-right & bottom-left 5px */
}
div {
  border-radius: 10px 5px 15px 0; /* top-left, top-right, bottom-right, bottom-left */
}

💻

Example

This example shows a blue box with rounded corners using border-radius. The corners are smoothly curved 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>Rounded Corners Example</title>
<style>
  .rounded-box {
    width: 200px;
    height: 100px;
    background-color: #007BFF;
    border-radius: 20px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 1.2rem;
  }
</style>
</head>
<body>
  <div class="rounded-box">Rounded Corners</div>
</body>
</html>

Output

A blue rectangular box with smooth rounded corners and white text "Rounded Corners" centered inside.

⚠️

Common Pitfalls

Some common mistakes when using border-radius include:

Using border-radius without a unit (like px or %) which will not work.
Expecting border-radius to work on elements without visible borders or backgrounds.
Setting very large radius values that can cause unexpected shapes.

Always specify units and ensure the element has visible edges to see the effect.

css

/* Wrong: missing units */
div {
  border-radius: 20; /* No unit, will not work */
}

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

📊

Quick Reference

Here is a quick summary of how to use border-radius:

Usage	Description	Example
One value	Rounds all corners equally	border-radius: 15px;
Two values	First for top-left & bottom-right, second for top-right & bottom-left	border-radius: 10px 5px;
Four values	Set each corner clockwise from top-left	border-radius: 5px 10px 15px 20px;
Percentage	Rounds corners relative to element size	border-radius: 50%; (makes circle if width=height)

✅

Key Takeaways

Use the CSS property border-radius with units like px or % to create rounded corners.

You can specify one to four values to control each corner's roundness individually.

Always ensure the element has visible edges (background or border) to see the effect.

Percentage values can create circles or ellipses when width and height are equal.

Avoid missing units or extremely large values to prevent unexpected shapes.