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?