Border-bottom-width Property in CSS3

How to set the width of bottom border in CSS3?

By using border-bottom-width property we can set the width of bottom border.

<style>
        .class1 {
            border-bottom-width: 12px;
            border-style: dotted;
        }

        .class2 {
            border-bottom-width: 10px;
            border-style: solid;
            border-color: orange;
        }

        .class3 {
            border-bottom-width: thick;
            border-style: dashed;
            border-color: green;
        }

        .class4 {
            border-bottom-width: medium;
            border-style: double;
            border-color: chocolate;
        }
</style>

<body>
    <p class="class1">www.TechFunda.com</p>
    <p class="class2">www.DotNetFunda.com</p>
    <p class="class3">www.ITFunda.com</p>
    <p class="class4">www.KidsFunda.com</p>
</body>

In the above code snippet we have given border-bottom-width property to the <p> elements with the help of .class selector. So that the .class selector applies the border-bottom-width property to the <p> elements. The border-bottom-width property with value "12px", border-style property with value "dotted" gives the 12 pixel width dotted bottom border to the element. The border-bottom-width property with value "10px", border-style property with value "solid", gives the 10 pixel width solid bottom border to the element.

The border-bottom-width property with value "thick", border-style property with value "dashed" gives the thick width dashed bottom border to the element. The border-bottom-width property with value "medium", border-style property with value "double" gives the medium width double bottom border to the element.

OUTPUT

Views: 3416 | Post Order: 54

CSS3 > Borders

Border-bottom-width Property in CSS3

How to set the width of bottom border in CSS3?

Related Posts

Utility Tools