1. 面向开发者的 Web 技术
  2. CSS：层叠样式表
  3. CSS 参考
  4. Properties
  5. border-left-style

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

border-left-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

The border-left-style CSS property sets the line style of an element's left border.

尝试一下

border-left-style: none; 
border-left-style: dotted; 
border-left-style: dashed; 
border-left-style: solid; 
border-left-style: groove; 
border-left-style: inset; 
<section id="default-example"> <div class="transition-all" id="example-element"> This is a box with a border around it. </div> </section> 
#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px; } body { background-color: #fff; }

备注：The specification doesn't define how borders of different styles connect in the corners.

Syntax

css
/* Keyword values */ border-left-style: none; border-left-style: hidden; border-left-style: dotted; border-left-style: dashed; border-left-style: solid; border-left-style: double; border-left-style: groove; border-left-style: ridge; border-left-style: inset; border-left-style: outset; /* Global values */ border-left-style: inherit; border-left-style: initial; border-left-style: unset;

The border-left-style property is specified as a single keyword chosen from those available for the border-style property.

Formal syntax

border-left-style = 
 <line-style> 

<line-style> = 
 none |
 hidden |
 dotted |
 dashed |
 solid |
 double |
 groove |
 ridge |
 inset |
 outset

Examples

HTML

html
<table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>

CSS

css
/* Define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 { border-left-style: none; } .b2 { border-left-style: hidden; } .b3 { border-left-style: dotted; } .b4 { border-left-style: dashed; } .b5 { border-left-style: solid; } .b6 { border-left-style: double; } .b7 { border-left-style: groove; } .b8 { border-left-style: ridge; } .b9 { border-left-style: inset; } .b10 { border-left-style: outset; }

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 3
# border-style
初始值none
适用元素所有元素. It also applies to ::first-letter.
是否是继承属性否
计算值as specified
动画类型离散值

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content