border-left

border-left 简写 CSS 属性设置元素左侧边框的所有属性。

试试看

与所有简写属性一样，border-left 始终设置其可以设置的所有属性的值，即使它们未指定。它将未指定的属性设置为其默认值。考虑以下代码

css
border-left-style: dotted;
border-left: thick green;

它实际上与以下代码相同

css
border-left-style: dotted;
border-left: none thick green;

在 border-left 之前给出的 border-left-style 值将被忽略。由于 border-left-style 的默认值为 none，因此未指定 border-style 部分会导致没有边框。

组成属性

此属性是以下 CSS 属性的简写

语法

css
border-left: 1px;
border-left: 2px dotted;
border-left: medium dashed blue;

/* Global values */
border-left: inherit;
border-left: initial;
border-left: revert;
border-left: revert-layer;
border-left: unset;

简写属性的三个值可以以任何顺序指定，并且可以省略一个或两个值。

值

<br-width>

参见 border-left-width。

<br-style>

参见 border-left-style。

<color>

参见 border-left-color。

正式定义

初始值与简写属性的每个属性相同
应用于所有元素。它也适用于 ::first-letter。
继承否
计算值与简写属性的每个属性相同
动画类型与简写属性的每个属性相同

正式语法

border-left = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

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

示例

应用左侧边框

HTML

html
<div>This box has a border on the left side.</div>

CSS

css
div {
  border-left: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

结果

规范

规范
CSS 背景和边框模块级别 3
# border-shorthands

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅