Home >Web Front-end >HTML Tutorial >How to set border rounded corners in html
How to set border rounded corners in html
- 青灯夜游Original
- 2021-12-14 14:37:2949548browse
Setting method: 1. Use the border-radius attribute, the syntax "border-radius: fillet radius;"; 2. Use the border-image attribute to create a border with a picture with rounded corners, the syntax " border-image:url(rounded image address) 20 fill;”.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
htmlSet border rounded corners
1. Use the border-radius attribute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300px;
border-radius: 25px;
}
</style>
</head>
<body>
<div>border-radius 属性为元素添加圆角边框！ </div>
</body>
</html>
2. Use the border-image attribute
Use an image with rounded corners to create a border
Example:
Use pictures: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.border_image{
width:100px;
border:double gray 10px;
border-image:url(https://img.php.cn/upload/article/000/000/024/61b839d3982fc635.png) 20 fill;
text-align:center;
color:white;
}
</style>
</head>
<body>
<div class="border_image">1</div>
</body>
</html>
Recommended tutorial: "html video tutorial"
The above is the detailed content of How to set border rounded corners in html. For more information, please follow other related articles on the PHP Chinese website!