Home > Article > Web Front-end > What does border-radius mean?

What does border-radius mean?

青灯夜游Original: 2021-01-06 14:21:2964079browse

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.

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|%

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>

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!

html5 css css3 Length border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the width and height of the text box in cssNext article：How to set the width and height of the text box in css

See more

What does border-radius mean?

Related articles