Bird
Raised Fist0
CSSmarkup~5 mins

Border radius in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the CSS property border-radius do to an element?
easy
A. It makes the corners of the element rounded instead of sharp.
B. It changes the border color of the element.
C. It adds a shadow around the element.
D. It increases the border thickness.

Solution

  1. Step 1: Understand the property purpose

    The border-radius property controls the roundness of the corners of an element.

  2. Step 2: Compare options with property effect

    Only "It makes the corners of the element rounded instead of sharp." describes making corners rounded, which matches border-radius.

  3. Final Answer:

    It makes the corners of the element rounded instead of sharp. -> Option A

  4. Quick Check:

    border-radius = rounded corners [OK]
Hint: Remember: radius means roundness, so border-radius rounds corners [OK]
Common Mistakes:
  • Confusing border-radius with border color or thickness
  • Thinking it adds shadows
  • Assuming it changes element size
2. Which of the following is the correct CSS syntax to make all corners of a box have a 10px rounded radius?
easy
A. border-radius: 10;
B. border-radius: 10px, 10px, 10px, 10px;
C. border-radius: 10px 10px 10px 10px 10px;
D. border-radius: 10px;

Solution

  1. Step 1: Recall correct CSS syntax for border-radius

    The property accepts one to four length values without commas. For all corners equal, one value is enough.

  2. Step 2: Check each option's syntax

    border-radius: 10px; uses one value with unit and no commas, which is correct. border-radius: 10; lacks units, C has too many values, D uses commas which are invalid.

  3. Final Answer:

    border-radius: 10px; -> Option D

  4. Quick Check:

    One value with unit, no commas = correct syntax [OK]
Hint: Use one value with unit and no commas for all corners [OK]
Common Mistakes:
  • Omitting units like px
  • Adding commas between values
  • Using too many values
3. What will be the visual result of this CSS on a square div?
div {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}
medium
A. A blue square with sharp corners
B. A blue circle
C. A blue rectangle with rounded corners
D. A blue square with a thick border

Solution

  1. Step 1: Understand border-radius with percentage

    Setting border-radius: 50% on a square makes the corners fully rounded, forming a circle shape.

  2. Step 2: Analyze the div shape and color

    The div is 100px by 100px, so a circle with 100px diameter and blue fill will appear.

  3. Final Answer:

    A blue circle -> Option B

  4. Quick Check:

    border-radius 50% on square = circle [OK]
Hint: 50% border-radius on square = circle shape [OK]
Common Mistakes:
  • Thinking 50% means half-rounded corners only
  • Confusing circle with rectangle
  • Ignoring the shape dimensions
4. Identify the error in this CSS snippet that tries to round only the top-left corner:
div {
  border-radius-top-left: 15px;
}
medium
A. border-radius cannot round individual corners
B. Value 15px is missing units
C. Property name is incorrect; should be border-top-left-radius
D. The property needs !important to work

Solution

  1. Step 1: Recall correct property for individual corner radius

    The correct property to round the top-left corner is border-top-left-radius.

  2. Step 2: Check the given property name

    The snippet uses border-radius-top-left, which is invalid CSS syntax.

  3. Final Answer:

    Property name is incorrect; should be border-top-left-radius -> Option C

  4. Quick Check:

    Individual corner radius = border-top-left-radius [OK]
Hint: Remember: 'border-top-left-radius' for top-left corner [OK]
Common Mistakes:
  • Swapping words in property name
  • Forgetting units on values
  • Thinking border-radius alone can target one corner
5. You want to create a button with the top-left and bottom-right corners rounded by 20px, and the other corners sharp. Which CSS code achieves this?
hard
A. border-radius: 20px 0 0 20px;
B. border-radius: 20px 0 20px 0;
C. border-radius: 20px 0 0 0 20px;
D. border-radius: 20px 0 20px 20px;

Solution

  1. Step 1: Recall border-radius order for four values

    The order is top-left, top-right, bottom-right, bottom-left.

  2. Step 2: Assign 20px to top-left and bottom-right, 0 to others

    So values should be: 20px (top-left), 0 (top-right), 20px (bottom-right), 0 (bottom-left).

  3. Step 3: Match options with correct order

    border-radius: 20px 0 0 20px; matches this order correctly.

  4. Final Answer:

    border-radius: 20px 0 0 20px; -> Option A

  5. Quick Check:

    Order: top-left, top-right, bottom-right, bottom-left [OK]
Hint: Remember order: top-left, top-right, bottom-right, bottom-left [OK]
Common Mistakes:
  • Mixing up the order of values
  • Using five values instead of four
  • Assigning wrong corners to values