Home 〉 CSS Tutorials 〉 CSS Border-Radius Property Explained with Examples for Beginners
CSS Border-Radius Property Explained with Examples for Beginners !
CSS Border-Radius Property Explained with Examples for Beginners !
Want to create elements with rounded corners? The CSS `border-radius` property lets you round the corners of elements, adding a modern touch to your designs. This tutorial explains how to apply `border-radius` to all corners or individual ones, using various units. It also demonstrates how to create circles and ellipses with this property. Learn to enhance your UI elements with smooth curves. Explore our full guide on CSS Border-Radius Property
CSS 'border-radius' Property - Easy Guide with Examples
The CSS 'border-radius' property allows you to create rounded corners for elements. It's a simple way to make your web design look smooth and clean.
Let's walk through how it works with examples.
Basic Syntax
Syntax ✍
selector {
border-radius: value;
}
The 'value' can be in px, em, %, or any CSS unit.
Border-Radius - How It Works
You can use 'border-radius' in different ways:
All Corners Rounded
html code 📝 
<!DOCTYPE html>
<html>
<head>
<style>
.rounded-box {
border: 2px solid black;
border-radius: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="rounded-box">Rounded corners on all sides</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Meaning: Each corner of the box is rounded with 10px.
Circle Shape (Perfect Round)
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background-color: teal;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Meaning: When width and height are equal and 'border-radius: 50%', you get a perfect circle.
Specific Corners Only
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.top-round {
border: 2px solid blue;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="top-round">Only top corners are rounded</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Meaning: Use individual properties like 'border-top-left-radius' to target specific corners.
Elliptical Corners with Two Values
html code 📝
<!DOCTYPE html>
<html>
<head>
<style>
.ellipse {
border: 2px solid gray;
border-radius: 30px 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="ellipse">Elliptical corner shape</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Meaning: The horizontal and vertical radii are different, creating an elliptical effect.
Related Topics
- 'border': Adds a visible border around elements.
- 'outline': Similar to border but does not affect layout.
- 'box-shadow': Adds shadow effects to elements, can work with 'border-radius'.
Conclusion
The 'border-radius' property is a quick way to soften the appearance of HTML elements. Whether you want slightly rounded corners or a fully circular shape, this property gives you full control. Play with different values to understand how corners respond.
It's simple, effective, and widely used in modern web design.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Padding Explained with Examples | CSS Box Model Guide
- CSS Width and Height Property Tutorial with Examples for Beginners
Related Topics:
- CSS Border Property Explained with Easy Examples for Beginners
- HTML div and span Tag Explained with Examples - Complete Guide
Frequently Asked Questions (FAQs)
What is the default value of border-radius?
By default, 'border-radius' is '0', which means square corners.
Can I create a circle using border-radius?
Yes. If width and height are equal, 'border-radius: 50%' makes a perfect circle.
Can I apply different values to each corner?
Yes! You can use 'border-top-left-radius', 'border-top-right-radius', etc.
What's the difference between px and % in border-radius?
- 'px' gives a fixed curve size.
- '%' curves based on the size of the element.
Will 'border-radius' work without a border?
Yes, 'border-radius' works even without a visible border.