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: 3406 | Post Order: 54