Home > Article > Web Front-end > How to achieve rounded corners effect in css

How to achieve rounded corners effect in css

青灯夜游Original: 2021-03-22 11:17:079012browse

In CSS, you can use the border-radius attribute to achieve a rounded corner effect. The border-radius attribute is used to set the rounded corners of the outer border of an element. You only need to add the "border-radius: rounded corner value;" code style to the specified element to achieve the rounded corner effect.

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

In CSS, you can use the border-radius attribute to achieve a rounded corner effect.

CSS3 border-radius property

Using the CSS3 border-radius property, you can make "rounded corners" for any element.

Syntax:

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

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.

How to achieve rounded corners effect in css

[Recommended tutorial: CSS video tutorial]

Specification rules for the border-radius attribute value:

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

The following are four examples:

1. Four values- border-radius: 15px 50px 30px 5px;

How to achieve rounded corners effect in css

2. Three values - border-radius: 15px 50px 30px;

How to achieve rounded corners effect in css

3. Two values - border-radius: 15px 50px;

How to achieve rounded corners effect in css

4. A value- border-radius: 25px;

How to achieve rounded corners effect in css

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:

How to achieve rounded corners effect in css

For more programming-related knowledge, please visit: Programming Video! !

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

html5 css css3 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：What attributes are used to float elements in CSS?Next article：What attributes are used to float elements in CSS?

See more

How to achieve rounded corners effect in css

Related articles