Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.