Border-top Property in CSS3

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

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

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

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

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

OUTPUT

Views: 3764 | Post Order: 66

CSS3 > Borders

Border-top Property in CSS3

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

Related Posts

Utility Tools