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

Home

Web Front-end

CSS Tutorial

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

青灯夜游

Jul 06, 2021 pm 05:25 PM

css

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

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>

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!

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