Border-top-style Property in CSS3

How to set the style to the top border of an specified element in CSS3?

By using border-top-style property we can set the style to the top border of an specified element.

 <style>
        p {
        border:solid;
        }
        .class1 {border-top-style:dashed;}
        .class2 {border-top-style:double;}
        .class3 {border-top-style:groove;}
        .class4 {border-top-style:hidden;}
        .class5 {border-top-style:inset;}
        .class6 {border-top-style:none;}
        .class7 {border-top-style:outset;}
        .class8 {border-top-style:ridge;}
        .class9 {border-top-style:solid;}
</style>

<body>
    <p class="class1">TechFunda with Dashed top border.</p>
    <p class="class2">TechFunda with Double top border. </p>
    <p class="class3">TechFunda with groove top border.</p>
    <p class="class4">TechFunda with Hidden top border.</p>
    <p class="class5">TechFunda with Inset top border.</p>
    <p class="class6">TechFunda with No top border.</p>
    <p class="class7">TechFunda with Outset top border.</p>
    <p class="class8">TechFunda with Ridge top border.</p>
    <p class="class9">TechFunda with Solid top border.</p>
</body>

In the above code snippet we have given border-top-style property to the .class selector. So that the .class selector selects the specified <p> elements and applies the style.

OUTPUT

Views: 3032 | Post Order: 70

CSS3 > Borders

Border-top-style Property in CSS3

How to set the style to the top border of an specified element in CSS3?

Related Posts

Utility Tools