CSS3 is a style sheet language used for web design that introduces many new features and capabilities, one of which is the ability to create rounded corner effects. In this article, we will introduce how to use CSS3 to achieve rounded corners and provide corresponding source code examples.
In CSS3, we can use border-radiusattributes to set the rounded corners of elements. border-radiusThe property accepts one or more length values that specify the radius of the fillet. Here's a basic example:
.rounded-box {
border-radius: 10px;
}
In the example above, we created a rounded-boxclass called and border-radiusset the property to 10px, which will make all four corners of the element have 10pxrounded corners.
Instead of using a single value, we can border-radiusspecify multiple values for the property to set different corner radii. For example:
.rounded-box {