Home > Article > Web Front-end > How to set rounded borders in css
The way to set a rounded border in css is to use the rounded border [border-radius]. If the rounded corners of these four radians are the same, it can be written as [border-radius: 30px;].
The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.
How to set rounded borders in css:
Basic usage of rounded borders (border-radius):
The most basic of rounded borders The usage is to set four rounded corners with the same arc
boder-top-left-radius:30px; //左上角 boder-top-right-radius:30px; //右上角 boder-bottom-left-radius:30px; //右下角 boder-bottom-right-radius:30px; //左下角
If the four rounded corners are the same, it can be written as:
border-radius:30px;
cssSet the rounded border:
css Part:
.div1{ margin:0 auto; background: darkcyan; width:200px; height:200px; border:2px solid darkslategray; border-radius:30px; text-align: center; line-height: 200px; }
html part:
<div class="div1">圆角边框</div>
The effect is as shown:
Recommended related tutorials: CSS video Tutorial
The above is the detailed content of How to set rounded borders in css. For more information, please follow other related articles on the PHP Chinese website!