Home > Article > Web Front-end > How to set the border to rounded corners in css
How to set the border to rounded corners in css
- 青灯夜游Original
- 2021-09-14 16:21:3314646browse
In CSS, you can use the border-radius attribute to set the border to rounded corners. You only need to add the "border-radius:radius value;" style to the border element to set four rounded corners at the same time. Radius, sets all four corners of the border to rounded corners.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The most common and simplest way to set a rounded border in css is to use the border-radius attribute.
CSS rounded corners only need to set one property: border-radius (meaning "border radius"). You provide a value for this property to set the radii of all four corners at the same time. All legal CSS measurements can be used: em, ex, pt, px, percentage, etc.
border-radius can set 1 to 4 values at the same time:
If you set 1 value, it means that all 4 fillets use this value.
<!DOCTYPE html>
<html>
<head>
<style>
div{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px;
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>Rendering:
If two values are set, it means that the upper left corner and the lower right corner are used The first value is used, and the second value is used for the upper right and lower left corners.
If three values are set, it means that the upper left corner uses the first value, the upper right corner and lower left corner use the second value, and the lower right corner uses the third value.
If four values are set, they correspond to the upper left corner, upper right corner, lower right corner, and lower left corner (clockwise order).
border-radius can also set the second set of values using slashes. The first set of values represents the horizontal radius, and the second set of values represents the vertical radius. The second set of values can also set 1 to 4 values at the same time, and the application rules are the same as the first set of values.
Related recommendations: "css video tutorial"
The above is the detailed content of How to set the border to rounded corners in css. For more information, please follow other related articles on the PHP Chinese website!