CSS border radius
Created By: chatGPT
The
border-radius property in CSS is used to create rounded corners for elements. This property can accept one to four values, which define the radii of the corners of a box./* Apply a uniform border radius to all corners */
.box {
border-radius: 10px;
}
/* Different radius values for each corner */
.box {
border-radius: 10px 20px 30px 40px; /* top-left, top-right, bottom-right, bottom-left */
}
/* Using percentages for circular corners */
.box {
border-radius: 50%; /* Creates a circle when the width and height are equal */
}You can also use shorthand properties to specify the radius for only two corners at a time. For example, using two values applies different radii to the top-left & bottom-right and top-right & bottom-left corners.
.box {
border-radius: 15px 25px; /* top-left/bottom-right and top-right/bottom-left */
}Effects of the border-radius on box-shadow:
When you apply a border radius to an element with a shadow, the shadow gets rounded corners as well, creating a cohesive look. This can enhance the visual presentation of your UI.
.box {
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}You can create interesting shapes by combining
border-radius with other properties. For instance, using a background color or a gradient, along with a border radius, can make the element visually appealing..box {
background: linear-gradient(to right, #f06, #ffba00);
border-radius: 20px;
padding: 20px;
}To revert the rounded corners back to sharp, simply set the border-radius to
0 or omit it altogether. This will bring back the rectangular shape of the element..box {
border-radius: 0;
}