CSS radius is a property that allows you to round the corners of an element. It can be applied to any block-level element, such as a div, table, or button, and is typically used to create a more visually appealing or modern look for your website.
There are two types of radius that you can use in CSS:
Border radius: This property allows you to round the corners of an element’s border. You can specify the radius for each corner individually, or use the same value for all corners. For example:
.rounded {
border-radius: 10px;
}
This will give all four corners of the element a 10px radius. You can also specify different values for each corner using the following syntax:
.rounded {
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 25px;
}
Box radius: This property allows you to round the corners of an element’s background. It works in the same way as border radius, but affects the element’s background rather than its border. For example:
.rounded {
box-radius: 10px;
}
This will give all four corners of the element’s background a 10px radius. You can also specify different values for each corner using the same syntax as border radius.
You can also use the border-radius and box-radius properties together to round both the border and the background of an element.
Here is an example of how you might use border radius in a real-world scenario:
button {
border-radius: 5px;
border: none;
background-color: blue;
color: white;
padding: 10px;
}
This will create a button with rounded corners and a blue background.
It’s important to note that the radius values you specify will be rendered differently depending on the size of the element. A large radius on a small element will result in more pronounced rounding, while a small radius on a large element will be less noticeable.