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!