Border-Bottom Shorthand

This example demonstrates how to style the bottom border of an element:

HTML file: Displayed by browser:
<style>
p.none {
   border-style: solid;
   border-bottom-style: none;
}
p.dotted {
   border-style: solid;
   border-bottom-style: dotted;
}
p.dashed {
   border-style: solid;
   border-bottom: 3px dashed red;
}
p.solid {
   border-style: solid;
   border-bottom: 0.5em solid #00ff00;
}
p.double {
   border-style: solid;
   border-bottom: thick double rgb(0,0,255);
}
p.groove {
   border-style: solid;
   border-bottom: 0.6em groove gold;
}
p.ridge {
   border-style: solid;
   border-bottom: 0.6em ridge gold;
}
p.inset {
   border-style: solid;
   border-bottom: 0.6em inset gold;
}
p.outset {
   border-style: solid;
   border-bottom: 0.6em outset gold;
}
</style>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border without color or width specified.</p>
<p class="dashed">A dashed bottom border 3 px wide in red.</p>
<p class="solid">A solid green 0.5em wide bottom border.</p>
<p class="double">A thick blue double bottom border.</p>
<p class="groove">A golden groove bottom border 0.6em wide.</p>
<p class="ridge">A golden ridge bottom border 0.6em wide</p>
<p class="inset">A golden inset bottom border 0.6em wide.</p>
<p class="outset">A golden outset bottom border 0.6em wide.</p>
</body>

No bottom border.

A dotted bottom border without color or width specified.

A dashed bottom border 3 px wide in red.

A solid green 0.5em wide bottom border.

A thick blue double bottom border.

A golden groove bottom border 0.6em wide.

A golden ridge bottom border 0.6em wide

A golden inset bottom border 0.6em wide.

A golden outset bottom border 0.6em wide.

By now, we KNOW the border-style has to be defined to see a border, right?

Back button Table of Contents Next button