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

How to use border-radius in CSS

php中世界最好的语言Original: 2017-11-23 11:30:592532browse

Today I will introduce to you border-radius, how to use border-radius, and the properties of border-radius. Let's look at a small case below.

DIVCSS3 rounded word: border-radius

Grammar structure

p{border-radius:5px}

Set the four corners of the DIV object box 5 Pixel rounded corner effect

p{border-radius:5px 0;}

Set the upper left corner and lower right corner of the DIV object box to 5px rounded corners, The other two corners are 0 No rounded corners

p{border-radius:5px 5px 0 0;}

Set the upper left and upper right corners of the DIV object box to be 5px rounded, and the other two corners are 0 and not rounded.

Description:

border-radius:3px 4px 5px 6px

represents the setting of 3px rounded corners in the upper left corner of the object, 4px rounded corners in the upper right corner, 5px rounded corners in the lower right corner, and lower left corner. Corners 6px rounded.

CSS3 rounded corners case

Set rounded corners on two DIV boxes and one picture Set rounded corners to practice CSS3 rounded corners.

Case HTML code

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>对象圆角 在线演示 </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<p>盒子左上角和右上角对象圆角测试</p> 
<p class="box">DIV盒子圆角</p> 
<p>盒子对象个角圆角测试</p> 
<p class="box3">DIV盒子圆角</p> 
<p> </p> 
<p>图片对象圆角测试</p> 
<p class="box2"><img  src="/static/imghwm/default1.png"  data-src="images/logo.gif"  class="lazy"   / alt="How to use border-radius in CSS" ></p> 
</body> 
</html>

Case CSS code:

.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto} 
.box2 img{border-radius:5px} 
.box3{border-radius:5px 0;  background:#999;width:300px; height:80px; margin:0 auto}

Case description

1). In order to observe the rounded corner effect of the first BOX box, The border style is set, and the rounded corner style border-radius:5px 5px 0 0; sets the upper left corner and upper right corner rounded corners.

2), set the background color of the second BOX3 box, and set the rounded corner style border-radius: 5px 0, set the upper left corner and lower right corner rounded corners

3), the third Set the rounded corner style border-radius:5px to the image img in the box2 box, and set the four corners to be rounded.

There is so much knowledge about border-radius. Interested friends can do it themselves. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use border-radius in CSS

Related articles