Original JS version
<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;/* 边框样式*/
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px; /*调节圆周程度*/
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>border-radius 圆角属性就是这么简单</div>
</body>
</html>JQ version
$("#DIV的ID号").css("border-radius","9px");
Note, this is the jquery code. Among them, border-radius is a rounded corner attribute, and all four sides are rounded corners. 9px is the radian of the rounded corners.
If you don't use the above code, you can directly use CSS3 to achieve it, see the following style sheet code:
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
fillet
Knowledge expansion:
Using the CSS3 border-radius property, you can make "rounded corners" to any element.
CSS3 border-radius - specify each rounded corner
If you specify only one value in the border-radius property, then 4 rounded corners will be generated.
However, if you want to specify one by one on the four corners, you can use the following rules:
Four values: the first value is the upper left corner, the second value is the upper right corner, the third value is the lower right corner, and the fourth value is the lower left corner.
Three values: the first value is the upper left corner, the second value is the upper right corner and the lower left corner, and the third value is the lower right corner
Two values: the first value is the upper left corner and the lower right corner, and the second value is the upper right corner and the lower left corner
One value: four fillets with the same value
property description
border-radius Abbreviation for all four corner border-*-*-radius properties
border-top-left-radius defines the arc of the top left corner
border-top-right-radius defines the arc of the top right corner
border-bottom-right-radius defines the arc of the bottom right corner
border-bottom-left-radius defines the arc of the bottom left corner