CSS1 Box border-style Property Example:

 

Examples (inline element <font>):

This is a normal paragraph

This line has <font style="border-style: none; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: hidden; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: dotted; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: dashed; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: solid; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: double; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: groove; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: ridge; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: inset; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: outset; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: dotted dashed; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: dotted dashed solid; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

This line has <font style="border-style: dotted dashed solid double; border-width: 1cm; border-color: red">...</font>

This is a normal paragraph

 

Examples (block element <p>):

This is a normal paragraph

This paragraph has <p style="border-style: none; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: hidden; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: dotted; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: dashed; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: solid; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: double; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: groove; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: ridge; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: inset; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: outset; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: dotted dashed; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: dotted dashed solid; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph

This paragraph has <p style="border-style: dotted dashed solid double; border-width: 1cm; border-color: red">...</p>

This is a normal paragraph


 

Hosted by www.Geocities.ws

1