How to use border-radius attribute-CSS Tutorial-php.cn

How to use border-radius attribute

不言

Release： 2021-04-26 17:25:21

Original

9914 people have browsed it

How to use the border-radius attribute: First create an HTML sample file; then create a div in the body; finally set the style of the div to "border-radius:45px;".

How to use border-radius attribute

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

border-radius attribute is a border attribute that can be used to set the border rounded corners. So what is the specific usage of the border-radius attribute? This article will introduce to you the specific usage of the border-radius attribute. Let’s look at the specific content below.

When we usually look at the border-radius attribute, we will see its syntax as follows

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

Copy after login

Many people may not know what this means, but in fact it is border-radius# The complete writing method of ##, we usually write, border-radius:20px;, the complete writing method should be: border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;, where the first four 20px represent the horizontal radius, and the following The four values represent the vertical radius. We draw ellipses or circles by setting the horizontal radius and vertical radius. We can also draw some other curved graphics.

Next let’s take a closer look at the

border-radius attribute

#We can

Set a rounded border or a circle

Rounded border

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 200px;
    width: 300px;
    border-radius: 45px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

Copy after login

The effect is as follows

How to use border-radius attribute

Circular

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#test {
    border: 3px solid lightblue;
    height: 100px;
    width: 100px;
    border-radius: 54px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

Copy after login

The effect is as follows

How to use border-radius attribute

can be set with radian The other graphics

The code is as follows

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
#test {
	height: 100px;
    width: 200px;
    border: 3px solid pink;
    border-radius: 60px 5px;
}
	</style>
</head>
<body>
<div id="test"></div>
</body>
</html>

Copy after login

The effect is as follows

How to use border-radius attribute

This article ends here , for more exciting content, you can pay attention to other related column tutorials on the php Chinese website! ! !

The above is the detailed content of How to use border-radius attribute. For more information, please follow other related articles on the PHP Chinese website!