CoderTools Web site

CSS border-style

Description


The border-style property is a short-hand command to define the border styles of all sides an html element. Each side can have a different style.

No default.
    Set the border style for all sides of an element:
    
    border-style: none;
    border-style: hidden;
    border-style: dotted;
    border-style: dashed;
    border-style: solid;
    border-style: double;
    border-style: groove;
    border-style: ridge;
    border-style: inset;
    border-style: outset;
    border-style: inherit;
    
        
    Set different border styles for individual sides of an html element:
    
    border-style: style style style style;   /* e.g. border-style: dotted dashed dotted dashed;   */
    
See also: border-top-style, border-bottom-style, border-left-style, border-right-style.
HTML & CSS Editor with FTP / FTPS

Examples for Border


Example 1:

This is the most straightforward example, all borders the same style of outset.

test text test text test text test text
    <style>
        #test { border-color: blue; border-style: outset; }
    </style>

    <div id="test">test text test text test text test text</div>

Example 2:

This example shows different styles set for each border.

test text test text test text test text
    <style>
        #test2 { border-style: dashed double inset groove; border-color: red;  }
    </style>

    <div id="test2">test text test text test text test text</div>

Values for Border


Name Values Description
border-style none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit
Set the style of the whole border of an html element. Can specify one style for all borders or different styles for each side of the html element.
border-left-style none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit
Specifies the style of the left border.
border-right-style none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit
Specifies the style of the right border.
border-top-style none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit
Specifies the style of the left border.
border-bottom-style none|hidden|dotted|dashed|solid|double
groove|ridge|inset|outset|inherit
Specifies the style of the left border.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

12/16/2017 7:42:54 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP