CSS border-left Property

Description

The border-left CSS property is used to define the characteristics of the left border of an HTML element, such as a div or a paragraph. It allows you to specify the border's width, style, and color. This property is part of the broader set of border-related properties in CSS, and it is commonly used to create visually appealing designs by adding borders to elements on webpages. By customizing the left border, web developers can enhance the overall look and feel of their websites, creating visually distinct and engaging user interfaces. Individual properties are: border-left-color, border-left-style, and border-left-width.

Initial value

See individual properties

Applies to

All elements

Inherited

No

Computed value

See individual properties

Animatable

Yes

JavaScript syntax

object.style.borderLeft

Interactive Demo

border-left: 3px solid red;

border-left: 2px dashed #1ECBE1;

border-left: 1rem dotted rgb(156, 234, 87);

border-left: thick solid rgba(123, 45, 87, .5);

border-left: solid;

border-left: dashed purple;

Syntax

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

Values

• <line-width>See border-left-width CSS property for values.
• <line-style>See border-left-style CSS property for values.
• <color>See border-left-color CSS property for values.
• inherit

Example

<div class="border">This is an example of the border-left property using a red solid border 3px in width.</div>

.border {
   border: 1px solid blue;
   border-left: 3px solid red;
   margin: 20px;
   padding: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS border-left property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	14	1	1	4.4

Last updated by CSSPortal on: 31st December 2023