What does border-radius mean?-CSS Tutorial-php.cn

What does border-radius mean?

青灯夜游

Release： 2023-01-04 09:38:54

Original

64070 people have browsed it

border-radius means "border rounded corner; rounded corner radius", which is a property of css and is used to create (1~4) rounded corner effects for the border of elements; the basic syntax is " border-radius: 1-4 length|%", set the direction to the upper left corner, upper right corner, lower right corner, and lower left corner.

What does border-radius mean?

The operating environment of this tutorial: windows7 system, css3&&html5 version, Dell G3 computer.

Tutorial recommendation: css video tutorial

border-radius

What does border-radius mean?

##border- Radius is a shorthand property in CSS3, used to create (1~4) rounded corners for the border.

Syntax:

border-radius: 1-4 length|%

Copy after login

Value:

length Defines the shape of the curve.
% Use % to define the shape of the corners.

Note: The order of the four values for each radius is: upper left corner, upper right corner, lower right corner, lower left corner. If the lower left corner is omitted, the upper right corner is the same. If the lower right corner is omitted, the upper left corner is the same. If the upper right corner is omitted, the upper left corner is the same.

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, the second value is the upper right corner and the lower left corner
One value: the four rounded corners have the same value

Example:

1. Four values -

border-radius: 15px 50px 30px 5px

What does border-radius mean?

2. Three values-

border-radius: 15px 50px 30px

What does border-radius mean? ##3. Two values-

border- radius: 15px 50px

What does border-radius mean? 4. Ellipse corners

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px;
} 
</style>
</head>
<body>

<p>椭圆边框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>

<p> 椭圆边框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>

<p>椭圆边框 - border-radius: 50%:</p>
<p id="rcorners9"></p>

</body>
</html>

Copy after login

What does border-radius mean? For more programming-related knowledge, please Visit:

programming teaching

! !

The above is the detailed content of What does border-radius mean?. For more information, please follow other related articles on the PHP Chinese website!