html border style HTML DOM Style borderRadius 属性

html border style

HTML border style 是一种用于控制 HTML 元素边框的样式。它可以用来定义元素的边框颜色、宽度和样式，以及其他一些属性。

HTML border style 属性可以通过 CSS 来定义，也可以通过 HTML 的 style 属性来定义。CSS 中的 border-style 属性可以用来控制元素的边框样式，而 HTML 的 style 属性则可以用来控制元素的边框颜色、宽度和样式。

<div style="border-style: solid; border-width: 1px; border-color: #000000;"> 
    <p>This is a div with a solid black 1px border.</p> 
</div> 

上面的代码将会在 div 元素周围显示一个 1px 粗、黑色的实心边框。

HTML border style 还有很多选项，包括 dotted、dashed、double、groove、ridge 等，这些都是不同的边框样式。例如，下面的代码将会在 div 元素周围显示一个 3px 粗、橙色的虚线边框：

 
 <div style="border-style: dashed; border-width: 3px; border-color: #FFA500;"> 
     <p>This is a div with a dashed orange 3px border.</p> 
 </div> 
 

此外，HTML 还有一个特殊的属性——border-radius——用于创建圆形或者圆角形元素。例如，下面的代码将会在 div 元素周围显示一个 5px 粗、黑色带有 10px 圆角半径的实心边框：

 
 <div style="border-style: solid ;border-width: 5px ;border-color:#000000 ;border-radius: 10px;"> 
     <p>"This is a div with a solid black 5px radius 10px border.” <
HTML DOM Style borderRadius 属性


Style borderRadius 属性
 Style 对象

实例
向 div 元素添加圆角边框：

document.getElementById("myDIV").style.borderRadius="25px";





定义和用法
borderRadius 属性是设置或返回四个边框半径属性的速记属性。
提示：该属性允许您向元素添加圆角边框！

浏览器支持






IE9+、Firefox、Chrome、Safari 和 Opera 支持 borderRadius 属性。

语法
返回 borderRadius 属性：

object.style.borderRadius

设置 borderRadius 属性：

object.style.borderRadius="1-4 length|% / 1-4 length|%|initial|inherit"

注意：用于半径的四个值的是按照左上、右上、右下、左下的顺序给出的。如果左下的值被省略了，则它的值与右上的值一致。如果右下的值被省略了，则它的值与左上的值一致。如果右上的值被省略了，则它的值与左上的值一致。
属性值


值
描述


length
定义角的形状。默认值是 0。


%
以 % 形式定义角的形状。


initial
设置该属性为它的默认值。请参阅 initial。


inherit
从父元素继承该属性。请参阅 inherit。


技术细节


默认值：
0


返回值：
字符串，表示元素的 border-radius 属性。


CSS 版本
CSS3





相关文章
CSS 参考手册：border-radius 属性

 Style 对象