CSS margin-left and border-left-color Property

The border-left-color property specifies the color of the left border of an element.

The color of the left border with the colors of the right, top and bottom borders, can be specified with the border-color shorthand property as well.

If you use the border-left-color property, you should first set the border-style or border-left-style properties and then change the color of the specified style.

The default width of a border is medium. You can define the width using either the border-width or border-left-width properties.

CSS margin-left Property

This CSS tutorial explains how to use the CSS property called margin-left with syntax and examples.

Description

The CSS margin-left property defines the margin on the left side of an element.

Syntax

The Syntax for the margin-left CSS property is:

margin-left: value;

Example

We will discuss the margin-left property below, exploring examples of how to use this property in CSS with a fixed values as well as a percentage value.

Using Fixed Value

Let’s look at a CSS margin-left example where we have provided the value as a fixed vlaue

div { margin-left: 5px;  }

In this CSS margin-left example, we have provided a value of 5px which would apply to the left side of the element.

Let’s look at another CSS margin-left example with a fixed value.

div { margin-left: 5em; }

In this CSS margin-left example, we have provided a value of 5em which would apply to the left side of the element

Using Percentage

Let’s look at a CSS margin-left example where we have provide the value as a percentage

div { margin-left: 4% }

In this CSS margin-left example, We have provided a value of 4% which would apply to the left side of the element

Using Auto

Let’s look at an example where we have provided the value as auto.

div { margin-left: auto; }

In this example, we have set the left margin to auto for the<div>tag. The auto value is generally used to center blocks.

CSS | border-left-color Property

The border-left-color Property is used to set the color of the left-border in an Element. It is mandatory to declare the border-style or the border-left-style property before the border-left-color Property.

Syntax:

border-left-color: coral| transparent |initial|inherit;

Default Value: The current color of the element

Property Values

color: It sets the color of the Element’s left-border.

Syntax:

border-left-color:color

Example:

html

<!DOCTYPE html>
<html>

<head>
     <title>
         CSS | border-left-color Property
     </title>
      <style>
          h1 {
             color: red;
           }

          h3 {
              border: 2px solid red;
              border-left-color: green;
              width: 50%;
           }
        </style>
      </head>
  
      <body>
           <center>
     
               <h1>CodeOne</h1>
               <h2>border-left-color:color;</h2>
               <h3>CodeOne</h3>

               <!-- Sets the color-->
               <p style="border-style:dotted;
                         border-left-color:coral;
                         width:70%">
               It is a computer science portal for CodeOne.</p>


      </body>
      </html></li>

Output:

Leave a Reply

Your email address will not be published. Required fields are marked *