.jpeg)
CSS Border Radius
- The border-radius property is used to create rounded corners of HTML elements.
- It controls the roundness of an element's border.
- CSS border-radius can create rounded boxes, circles, and modern UI components.
- It is commonly used for buttons, cards, profile images, and containers.
What is CSS Border Radius?
The CSS border-radius property is used to add rounded corners to an element.
It changes the sharp edges of boxes into smooth curved corners.
Border radius is widely used in modern web design to create attractive cards, buttons, images, and user interface components.
CSS border-radius Syntax
div {
border-radius:
10px;
}
Creating Rounded Corners
You can create rounded corners by applying a value in pixels to the
border-radius property.
.box {
width: 200px;
height: 100px;
background-color: blue;
border-radius:
20px;
}
Creating Circular Elements
To create a perfect circle, set the border-radius value to
50% and make the width and height equal.
.profile {
width: 150px;
height: 150px;
border-radius:
50%;
}
Border Radius Individual Corners
CSS allows you to apply different radius values to individual corners. Each corner can be styled separately.
border-top-left-radius
Controls the top-left corner.
border-top-right-radius
Controls the top-right corner.
border-bottom-left-radius
Controls the bottom-left corner.
border-bottom-right-radius
Controls the bottom-right corner.
.box {
border-top-left-radius:
30px;
border-bottom-right-radius:
30px;
}
Border Radius with Images
Border radius is commonly used with images to create rounded profile pictures and modern image cards.
img {
border-radius:
50%;
}
CSS border-radius Shorthand Property
The shorthand property allows you to set all four corner radius values in a single line.
.card {
border-radius:
10px 20px 30px 40px;
}
Border Radius Value Order
Why Use CSS Border Radius?
Modern UI Design
Creates smooth and attractive user interfaces.
Buttons
Makes buttons look more interactive.
Profile Images
Helps create circular profile pictures.
Cards
Creates clean card-based layouts.