CSS 中的 border-style 属性

cssweb developmentfront end technology更新于 2025/2/6 8:12:17

CSS border-style 属性用于指定元素的边框样式。我们还可以使用 border-top-style、border-right-style、border-left-style 和 border-right-style 属性为各个边定义 border-style。

语法

CSS border 属性的语法如下 −

Selector {
   border: /*value*/
}

以下示例说明了 CSS border-style 属性 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div:first-of-type {
   margin: 5% 0 0 20%;
}
div {
   height: 40px;
   width: 40px;
   margin: auto;
   padding: 10px;
   border-style: solid;
   display: flex;
   float: left;
}
#d1 {
   border-style: double dashed;
}
#d2 {
   border-style: dotted;
}
</style>
</head>
<body>
<div></div>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 20px;
   float: left;
   height: 80px;
   width: 60px;
   border-style: ridge;
   border-width: 1.2em;
   border-color: midnightblue;
   border-bottom-left-radius: 50%;
}
div + div {
   height: 120px;
   width: 80px;
   border-style: double;
   border-color: seagreen;
   border-right-width: 180px;
   border-bottom-right-radius: 100%;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>