What is the css property that sets the corner radius of an element?-CSS Tutorial-php.cn

What is the css property that sets the corner radius of an element?

青灯夜游

Release： 2021-07-06 17:25:03

Original

2902 people have browsed it

The css attribute that sets the rounded corner radius for an element is border-radius. This attribute can set the outer border rounded corners of the element. You only need to add the "border-radius: rounded corner value;" code style to the specified element. That is Can achieve rounded corner effect.

What is the css property that sets the corner radius of an element?

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

The css property that sets the corner radius of an element is border-radius.

The border-radius property can set the outer border of an element to be rounded; using the CSS3 border-radius property, you can make "rounded corners" for any element.

What is the css property that sets the corner radius of an element?

Syntax:

border-radius: 1-4 length|% / 1-4 length|%;

Copy after login

Note: The order of the four values for each radius is: upper left, upper right, lower right, lower left. 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.

Value	Description
length	Definition Bend The shape of the Tao.
%	Use % to define the shape of the corners.

Specification rules for border-radius attribute values:

Four values: the first value is the upper left corner, the second The first 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 lower left corner, the third value The 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 One value with the lower left corner
: The four rounded corners have the same value

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			div {
				padding: 20px;
				width: 200px;
				height: 150px;
			}
			
			#rcorners1 {
				border-radius: 25px;
				background: #8AC007;
			}
			
			#rcorners2 {
				border-radius: 25px;
				border: 2px solid #8AC007;
			}
			
			#rcorners3 {
				border-radius: 25px;
				background: url(/images/paper.gif);
				background-position: left top;
				background-repeat: repeat;
			}
		</style>
	</head>

	<body>
		<p>指定背景颜色元素的圆角:</p>
		<div id="rcorners1">圆角</div>
		<p>指定边框元素的圆角:</p>
		<div id="rcorners2">圆角</div>
		<p>指定背景图片元素的圆角:</p>
		<div id="rcorners3">圆角</div>

	</body>

</html>

Copy after login

Rendering:

What is the css property that sets the corner radius of an element?

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the css property that sets the corner radius of an element?. For more information, please follow other related articles on the PHP Chinese website!