Border Style

CSS enable you to set various different border styles using the border-style property. Default border style setting is none.

The border-style values:

• none
• hidden
• solid
• double
• dotted
• dashed
• groove
• ridge
• inset
• outset

Here is an example that let you see all the border styles, except none and hidden.

<style type="text/css">
<!--
h1 {
    border-width: 6px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    border-color: #66CCFF;
    color: #66CCFF;
    background: #123456;
    text-align: center;
    background-color: #0000FF;
}
-->
</style>

<h1 style="border-style: dotted">Border Style dotted</h1>

<h1 style="border-style: dashed">Border Style dashed</h1>

<h1 style="border-style: groove">Border Style groove</h1>

<h1 style="border-style: ridge">Border Style ridge</h1>

<h1 style="border-style: inset">Border Style inset</h1>

<h1 style="border-style: outset">Border Style outset</h1>

Advertisement

No User Comments.

No User Comments, be the first one to write your comments?