CSS Border Radius Tutorial

Learn how border-radius works with live examples

📘 What is Border Radius?

The border-radius property is used to create rounded corners for elements. You can make slightly rounded boxes, pill shapes, or even perfect circles.

It accepts values in px, %, em etc.

1️⃣ Basic Rounded Corners

.box{
   border-radius:10px;
}

Preview:

10px

2️⃣ More Rounded Corners

.box{
   border-radius:50px;
}

Preview:

50px

3️⃣ Circle Shape

.box{
   border-radius:50%;
}

Preview:

50%

4️⃣ Two Value Border Radius

.box{
   border-radius:20px 50px;
}

Preview:

20px 50px

5️⃣ Four Corner Control

.box{
   border-radius:10px 40px 60px 80px;
}
/* order:
top-left
top-right
bottom-right
bottom-left */

Preview:

4 Values