border-left-style
Quick Summary for border-left-style
Code Usage for border-left-style
/* 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: revert; border-left-style: unset;
More Details for border-left-style
border-left-style
The border-left-style
CSS property sets the line style of an element's left border
.
Note: The specification doesn't define how borders of different styles connect in the corners.
Syntax
/* 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: revert; 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 definition
Initial value | none |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
<line-style>where
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Examples
Setting border-left-style
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 /* 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;}
ResultSpecifications
Specification |
---|
CSS Backgrounds and Borders Module Level 4 # the-border-style |
See also
The other style-related border properties:border-bottom-style
, border-right-style
, border-top-style
, and border-style
. The other left-border-related properties: border-left
, border-left-color
, and border-left-width
. Last modified: Nov 14, 2021, by MDN contributors
Select your preferred language English (US)DeutschFrançais日本語한국어Polski中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline