How to set the Border fillet by html

Xiaobian to share with you how to set html border rounded corners, I believe most people do not know how, so share this article for everyone's reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

Setting method: 1. Use border-radius attribute, syntax "border-radius: fillet radius;";2. Use border-image attribute to create a border with a picture with rounded corners, syntax "border-image:url(rounded picture address) 20 fill;".

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

1. Use the border-radius attribute

div { border: 2px solid #a1a1a1; padding: 10px 40px; background: #dddddd; width: 300px; border-radius: 25px; } The border-radius property adds a rounded border to an element!

2. Using border-image attribute

Use a picture with rounded corners to create a border

Example:

Use pictures:

.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; } 1

The above is "html how to set the border rounded" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!