Open In App
Related Articles

CSS border-left Property

Improve Article
Save Article
Like Article

The border-left property in CSS is used to set all bottom left properties in one line. It is used to set the width, style, and color of the left border.

border-left: border-width border-style border-color|initial|

border-left is a shorthand to set the below property values.
Property Values: 

  • border-width: It is used to set the width of border.
  • border-style: It is used to set the style of border. Its default value is ‘none’.
  • border-color: It is used to set the color of border.
  • initial: This property is used to set border-bottom to its default value.
  • inherit: This property is inherited from its parent.

Example 1:


<!DOCTYPE html>
    <title>border-left property</title>
    <!-- border-left CSS property -->
        h1 {
            border-left: 5px solid green;
        h2 {
            border-left: 4px dotted black;
        div {
            border: 2px solid red;
            border-left: 2px dashed black;
<body style="text-align:center">
    <h2>border-left property</h2>
      A computer science portal for geeks.


Supported Browsers: The browser supported by border-left property are listed below: 

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 02 Jun, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials