border-left-style
Quick Summary for border-left-style
The border-left-style CSS property sets the line style of an element's left border.
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 valuenone
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Computed valueas specified
Animation typediscrete

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;} 
Result

Specifications

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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
A.A. Milne’s Winnie-the-Pooh: “If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you.”
A.A. Milne
Random CSS Property

transform-style

The transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.
transform-style css reference