LCWD LogoLCWD
C

CSS Handbook

Clean • Professional

Rounded Corners (border-radius)

3 minute

CSS Rounded Corners (border-radius)

Rounded corners make elements like divs, buttons, and images look smooth and modern. The CSS border-radius property lets you control how rounded each corner is, improving both the design and user experience.

What is border-radius?

The border-radius property sets the radius of an element’s corners. It can be applied to any element that has a background-color, a border, or a background-image.

border-radius is actually a shorthand property for:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Basic syntax:

/* Apply same radius to all corners */
element {
  border-radius: 15px;
}

/* Different values for each corner: top-left, top-right, bottom-right, bottom-left */
element {
  border-radius: 15px 25px 35px 45px;
}

Examples

1. Rounded Corners on a Background Color

<div class="rounded-box">Rounded Corners!</div>

.rounded-box {
  width: 200px;
  height: 150px;
  background-color: #4CAF50;
  border-radius: 25px; /* Rounded corners */
  padding: 20px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

Output :

learn code with durgesh images

2. Rounded Corners on a Border

<div class="border-box">Rounded Corners!</div>

.border-box {
  width: 200px;
  height: 150px;
  border: 2px solid #4CAF50;
  border-radius: 25px; /* Rounded corners */
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Output :

learn code with durgesh images

3. Rounded Corners on a Background Image

<div class="image-box">Rounded Corners!</div>

.image-box {
  width: 200px;
  height: 150px;
  background-image: url('https://i0.wp.com/picjumbo.com/wp-content/uploads/beautiful-nature-mountain-scenery-with-flowers-free-photo.jpg?w=2210&quality=70');
  background-size: cover;
  border-radius: 25px; /* Rounded corners */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
}

Output :

learn code with durgesh images

Specifying Each Corner

You can define different radii for each corner using 1–4 values:

ValuesHow They Apply
1All corners the same
21st → top-left & bottom-right, 2nd → top-right & bottom-left
31st → top-left, 2nd → top-right & bottom-left, 3rd → bottom-right
4Top-left, top-right, bottom-right, bottom-left (in order)

Example:

#div1 { border-radius: 15px 50px 30px 5px; }
#div2 { border-radius: 15px 50px 30px; }
#div3 { border-radius: 15px 50px; }
#div4 { border-radius: 15px; }

Creating Elliptical and Circular Shapes

border-radius can also create ellipses, ovals, and perfect circles:

Elliptical Corners

Use two values separated by a slash /:

<div id="ellipse">Ellipse</div>
 #ellipse {
      width: 200px;
      height: 150px;
      background-color: #04AA6D;
      border-radius: 70px / 30px; /* horizontal / vertical radius */
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      margin: 20px;
    }

Output :

learn code with durgesh images

Circular Shapes

To make a perfect circle, use border-radius: 50% on a square element (width = height):

<div id="circle">Circle</div>
#circle {
      width: 150px;
      height: 150px;
      background-color: #FF5722;
      border-radius: 50%; /* perfect circle */
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      margin: 20px;
    }

Output :

learn code with durgesh images

For an oval shape, use border-radius: 50% on a rectangular element (width ≠ height):

<div id="oval">Oval</div>
 #oval {
      width: 200px;
      height: 100px;
      background-color: #2196F3;
      border-radius: 50%; /* oval shape */
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      margin: 20px;
    }

Output :

learn code with durgesh images

Why Use Rounded Corners?

  • Modern Aesthetics: Rounded corners give a smooth, professional look.
  • Improved UX: Soft edges are easier on the eyes and more approachable.
  • Flexible Designs: Works on buttons, cards, boxes, and images.
  • Creative Shapes: Ellipses, circles, and pill-shaped buttons are easy to make.

Complete HTML Example 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn CSS rounded corners using the border-radius property. Create boxes, images, and buttons with smooth corners.">
<title>CSS Rounded Corners Example</title>
<style>
  .rounded-box { width:200px; height:150px; background:#4CAF50; border-radius:25px; color:white; display:flex; justify-content:center; align-items:center; margin:20px;}
  .border-box { width:200px; height:150px; border:2px solid #4CAF50; border-radius:25px; display:flex; justify-content:center; align-items:center; margin:20px;}
  .image-box { width:200px; height:150px; background-image:url('example.jpg'); background-size:cover; border-radius:25px; display:flex; justify-content:center; align-items:center; color:white; font-weight:bold; margin:20px;}
  #ellipse { border-radius:70px / 30px; width:200px; height:150px; background:#04AA6D; margin:20px;}
  #circle { border-radius:50%; width:150px; height:150px; background:#FF5722; margin:20px;}
  #oval { border-radius:50%; width:200px; height:100px; background:#2196F3; margin:20px;}
</style>
</head>
<body>
  <div class="rounded-box">Rounded Box</div>
  <div class="border-box">Border Box</div>
  <div class="image-box">Image Box</div>
  <div id="ellipse"></div>
  <div id="circle"></div>
  <div id="oval"></div>
</body>
</html>

 

Article 0 of 0