html怎么设置边框圆角

设置方法：1、利用border-radius属性，语法“border-radius:圆角半径; ”；2、利用border-image属性，用带有圆角的图片来创建边框，语法“border-image:url(圆角图片地址) 20 fill; ”。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

html设置边框圆角

1、利用border-radius属性

!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、利用border-image属性

使用一个带有圆角的图片来创建边框

例：

使用图片：

!DOCTYPE html>
    html>
    	head>
    		meta charset="utf-8">
    		style>
			.border_image{
    			    width:100px;
    			    border:double gray 10px;
    			    border-image:url(https://img.js-code.COM/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>
    

推荐教程：《html视频教程》

以上就是html怎么设置边框圆角的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！