Border-style Property in CSS3

How to set the different type of borders to a specified element in CSS3?

By using border-style property we can set the different type of borders to a specified element.

<style>
        .class1 {border-style:none; border-color:none;}
        .class2 {border-style:solid; border-color:blueviolet;}
        .class3 {border-style:dashed; border-color:green;}
        .class4 {border-style:double; border-color:red;}
        .class5 {border-style:groove; border-color:navy;}
        .class6 {border-style:hidden; border-color:none;}
        .class7 {border-style:inset; border-color:brown;}
        .class8 {border-style:outset; border-color:orange;}
        .class9 {border-style:ridge; border-color:indianred;}
</style>

<body>
    <p class="class1">This element having border-style:none</p>
    <p class="class2">This element having border-style:solid</p>
    <p class="class3">This element having border-style:dashed</p>
    <p class="class4">This element having border-style:double</p>
    <p class="class5">This element having border-style:groove</p>
    <p class="class6">This element having border-style:hidden</p>
    <p class="class7">This element having border-style:inset</p>
    <p class="class8">This element having border-style:outset</p>
    <p class="class9">This element having border-style:ridge</p>
</body>

In the above code snippet we have given border-style property to the .class selector. .class selector selects the specified element and applies the different type of borders style to the <p> elements.

OUTPUT

Views: 3318 | Post Order: 65

CSS3 > Borders

Border-style Property in CSS3

How to set the different type of borders to a specified element in CSS3?

Related Posts

Utility Tools