0
0
CSSmarkup~5 mins

Border radius in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Border radius lets you make the corners of boxes round instead of sharp. It makes designs look softer and friendlier.

To make buttons with rounded corners for a modern look.
To create circular profile pictures or icons.
To soften the edges of cards or containers on a webpage.
To highlight elements by giving them a pill shape.
To improve the visual flow by avoiding harsh corners.
Syntax
CSS
selector {
  border-radius: value;
}

The value can be in px, em, %, or other CSS units.

You can set one value for all corners or specify each corner separately.

Examples
All four corners will be rounded with a radius of 10 pixels.
CSS
button {
  border-radius: 10px;
}
This makes the element a circle or oval if width and height differ.
CSS
div {
  border-radius: 50%;
}
Each corner has a different radius: top-left 10px, top-right 20px, bottom-right 30px, bottom-left 40px.
CSS
.box {
  border-radius: 10px 20px 30px 40px;
}
Only the top-left and bottom-right corners are rounded.
CSS
.card {
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
Sample Program

This example shows a green square box with rounded corners using border-radius: 25px;. The box is centered and has white text inside. The corners are smoothly rounded, making the box look friendly and modern.

CSS
<!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: #4CAF50;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: Arial, sans-serif;
      font-size: 1.25rem;
      margin: 2rem auto;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <main>
    <section>
      <div class="box" role="region" aria-label="Green box with rounded corners">
        Rounded Box
      </div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Using percentages like 50% on a square makes a perfect circle.

You can combine border-radius with shadows and colors for nice effects.

Remember to check how rounded corners look on different screen sizes for good design.

Summary

Border radius makes corners round instead of sharp.

You can set one radius for all corners or different ones for each corner.

Rounded corners improve the look and feel of buttons, boxes, and images.