Border-left Property in CSS3

How to set the style to the left border in CSS3?

By using border-left property we can set the style to the left border.

<style>
       .class1 {
       border-style:solid;
       border-left:dotted red;
       }
       .class2 {
       border-style:double;
       border-left:solid blue;
       }
       .class3 {
       border-style:groove;
       border-left:hidden;
       }
       .class4 {
       border-style:dashed;
       border-left:double;
       }
</style>

<body>
    <p class="class1">Shows the Red dotteed border at left side.</p>
    <p class="class2">Shows the Blue solid border at left side.</p>
    <p class="class3">Shows the Hidden border at left side.</p>
    <p class="class4">Shows the Double border at left side.</p>
</body>

In the above code snippet we have given border-leftproperty to the .class selectors. The .class selector selects the <p> elements and applies the border-left property. The border-left property with value "dotted red" gives the red color dotted border at the left side of the border, the border-leftproperty with value "solid blue" gives the blue color solid border at the left side of the border, the border-left property with value "hidden" gives the hidden border at the left side, the border-left property with value "double" gives the double line border at the left side of the border.

OUTPUT

Views: 3267 | Post Order: 58

CSS3 > Borders

Border-left Property in CSS3

How to set the style to the left border in CSS3?

Related Posts

Utility Tools