css - rounded corners
CSS rounded corners allow you to create elements with smooth, curved edges, adding visual appeal to your designs. Rounded corners are primarily created using the border-radius property.
The border-radius Property
The border-radius property is used to define the radius of an element’s corners. You can apply it to all four corners or specify each corner individually.
Syntax:
/* Single value for all corners */
border-radius: value;
/* Individual values for each corner (top-left, top-right, bottom-right, bottom-left) */
border-radius: top-left top-right bottom-right bottom-left;
/* Horizontal and vertical radii */
border-radius: horizontal-radius / vertical-radius;
Examples
1. Rounded Rectangle
div {
width: 200px;
height: 100px;
background-color: lightblue;
border-radius: 15px;
}
Creates a rectangle with a 15px curve on all corners.
2. Circle
A perfect circle can be created by setting the border-radius to 50% on a square element.
div {
width: 100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
Result: A circular element.
3. Oval
You can create an oval shape by using border-radius with different horizontal and vertical radii.
div {
width: 150px;
height: 75px;
background-color: pink;
border-radius: 50% / 25%;
}
Result: An oval with custom curvature.
4. Individual Corners
You can specify unique values for each corner.
div {
width: 200px;
height: 100px;
background-color: lightgreen;
border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 5px;
}
Each corner has a different curvature.
5. Combined Values
Instead of defining each corner individually, shorthand can be used.
div {
border-radius: 30px 10px 20px 5px;
}
Top-left: 30px, Top-right: 10px, Bottom-right: 20px, Bottom-left: 5px.
Using Percentage Values
You can use percentages for border-radius, which dynamically adjusts based on the element's dimensions.
div {
width: 200px;
height: 100px;
background-color: skyblue;
border-radius: 50%;
}
When applied to a non-square element, it creates an elliptical shape.
Advanced Designs with border-radius
1. Pill-Shaped Button
button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 50px;
}
Creates a long button with smooth, rounded edges.
2. Speech Bubble
div {
width: 150px;
height: 100px;
background-color: lightgray;
border-radius: 15px;
position: relative;
}
div::after {
content: '';
position: absolute;
bottom: -10px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: lightgray transparent transparent transparent;
}
Combines border-radius and pseudo-elements to create a speech bubble.
Browser Support
Feature Supported in
border-radius All modern browsers (IE9+)
Conclusion
Rounded corners enhance the visual design of elements and are easy to implement with the border-radius property. Whether you're creating buttons, cards, or custom shapes, rounded corners add elegance and flexibility to your CSS designs. Experiment with different values to create dynamic and appealing user interfaces!
