Border-right Property in CSS3

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

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

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

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

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

OUTPUT

Views: 3360 | Post Order: 62

CSS3 > Borders

Border-right Property in CSS3

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

Related Posts

Utility Tools