如何使用 CSS 创建和设置边框样式？

边界 属性用于在元素周围创建边框并定义它的外观。边界具有三个属性。

• 边框颜色
• 边框宽度
• 边框样式

边框样式属性：

这定义了边框的外观。它可以是实线、虚线、偏移等。允许使用以下值。

• dotted:虚线边框
• dashed:虚线边框
• 实心：实心边框
• double：双边框
• 凹槽： A 3D 凹槽边框。
• 脊： 3D 脊状边框。
• 插图： 3D 插图边框。
• 起始： 3D 起始边界。
• none：无边框样式
• hidden：隐藏的边框。

例子 ：

HTML

    
    
    

  



    
GeeksForGeeks

输出：

虚线边框

同样，我们可以根据我们的选择使用上述列表中的任何样式。我们可以单独更改边框的底部、左侧、右侧和顶部的样式。

示例：在上面的 HTML 代码中，只需更改边框的样式表，如下所示。

border-bottom-style : dashed;
border-left-style: solid;
border-right-style: double;
border-top-style: dotted;

输出：

border-width 属性：该属性用于定义所有边框的宽度。宽度可以是任何大小(以 px、pt、cm、em 等为单位)或使用预定义的值： thin、medium或 厚。

例子：

HTML

    
    
    

  



    
GeeksForGeeks

输出 ：

边框颜色属性：

此属性用于更改所有四个边框的颜色。在样式部分的上述 HTML 代码中更改或添加以下内容。

border-color : green;
border-top-color: black;
border-bottom-color: yellow;

输出：

边框简写：

我们可以在一个属性中定义所有上述属性， border 。

句法 ：

border:  (border-width) (border-style) (border-color);

例子 ：

border: 5px dotted red;

输出：

圆形边框：

border-radius属性用于添加圆角边框。使用以下语法更改上述 HTML 代码。

例子：

border: 5px solid red;
border-radius : 15px;

输出：