0
0
CSSmarkup~15 mins

Border radius in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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
Need a 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
Need a 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
Need a 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
Need a hint?

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