How to set rounded corners in css

In CSS, you can use the "border-radius" attribute to add a rounded border to the div element and set the rounded effect. This property sets the rounded corner values in the order of upper left corner, upper right corner, lower right corner, and lower left corner. If the four values are the same, the remaining three values can be omitted.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Method 1:

Basic usage of rounded border (border-radius):

The best way to use rounded border The basic 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；

Example:

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; }

The effect is as shown:

Method 2:

The rounded border can also use percentage as the unit. For example: setting the rounded border of a square to 50% will form a circle, but using percentages and pixels is not equivalent.

Note: After the percentage is greater than 50%, the shape will no longer change, and the radius of the fillet cannot exceed half of the width/height

Example:

css part:

.box1{ width:200px; height:200px; margin: 30px auto; border: 2px solid #e4007e; text-align: center; line-height: 200px; font-weight: bold; font-size: 24px; background: burlywood; border-radius: 50%;//圆角百分比 }

The effect is as shown:

Method 3:

Since a circle can be drawn using a rounded border, the same You can also draw an ellipse.

Example:

css part:

.box2{ width:200px; height:300px; margin: 30px auto; border: 2px solid #e4007e; text-align: center; line-height: 200px; font-weight: bold; font-size: 24px; background: burlywood; border-radius: 100px/150px; }

The effect is as shown:

Method 4:

Set rounded corners with different radians

Example:

css part:

#box4{ width:500px; position: relative; margin:30px auto; } .div4,.div5,.div6,.div7{ width:200px; height:200px; text-align: center; color:seagreen; font-size: 26px; line-height: 200px; background: yellowgreen; border:2px solid darkslategray; float:left; margin:20px; } .div4{border-top-left-radius: 40px;} .div5{border-top-right-radius: 20px;} .div6{border-bottom-left-radius: 30px;} .div7{border-bottom-right-radius: 10px;}

The effect is as shown:

Notes

After the percentage is greater than 50%, the shape will no longer change. The radius of the fillet cannot exceed half of the width/height.

【Recommended learning:css video tutorial】

The above is the detailed content of How to set rounded corners in css. For more information, please follow other related articles on the PHP Chinese website!