Home >Web Front-end >CSS Tutorial >How to use border-radius attribute

How to use border-radius attribute

不言Original: 2019-02-14 17:51:499939browse

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;".

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

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>

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>

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>

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!

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 use the font-family attributeNext article：How to use the font-family attribute

See more

How to use border-radius attribute

Related articles