Bird
Raised Fist0
CSSmarkup~15 mins

Border radius in CSS - Mini Project: Build & Apply

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
Create a Rounded Button with Border Radius
📖 Scenario: You are designing a simple webpage with a button. You want the button to look friendly and smooth by rounding its corners.
🎯 Goal: Build a button with a border radius so its corners are rounded. This will make the button look softer and more modern.
📋 What You'll Learn
Create a button element in HTML
Add a CSS class to style the button
Use the border-radius property in CSS to round the corners
Set the border radius to exactly 12px
Ensure the button has a visible border and background color
💡 Why This Matters
🌍 Real World
Rounded buttons are common in websites and apps to create a friendly and modern look that invites users to click.
💼 Career
Knowing how to style buttons with border-radius is a basic skill for front-end web developers and UI designers.
Progress0 / 4 steps
1
Create the HTML button element
Write an HTML <button> element with the text Click Me inside the <body> tag.
CSS
Hint

Use the <button> tag inside the <body> section with the exact text Click Me.

2
Add a CSS class to the button
Add a class attribute with the value rounded-btn to the existing <button> element.
CSS
Hint

Add class="rounded-btn" inside the <button> tag.

3
Write CSS to round the button corners
Inside a <style> tag in the <head>, write CSS for the class .rounded-btn that sets border-radius: 12px;.
CSS
Hint

Use a <style> tag in the <head> and write .rounded-btn { border-radius: 12px; }.

4
Add border and background color to the button
Inside the existing .rounded-btn CSS, add border: 2px solid #007BFF; and background-color: #E0F0FF; to make the button visible and styled.
CSS
Hint

Add border: 2px solid #007BFF; and background-color: #E0F0FF; inside the .rounded-btn CSS block.

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