CoderTools Web site

CSS border-width

Description


The border-width property is a short-hand command to defines the border widths of all sides an html element.

No default

Note: You have to set the border-style as well otherwise the border will not show because border-style defaults to none.
    Set the border width for all sides of an element:
    
    border-width: thin;
    border-width: medium;
    border-width: thick;
    border-width: length;   e.g. border-width: 3px;
        
    Set different border widths for individual sides of an html element:
    
    border-width: 5px 10px 5px 10px;
See also: border-top-width, border-bottom-width, border-left-width, border-right-width
HTML & CSS Editor with FTP / FTPS

Examples for Border


Example 1:

This is the most straightforward example, all borders the same size of 5px.

test text test text test text test text
    <style>
         #test { border-width:5px; border-style: solid; border-color: red; }
    </style>

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

Example 2:

This example shows different widths set for each border.

test text test text test text test text
    <style>
        #test2 { border-width:5px 20px 5px 20px; border-style: solid; border-color: red; }
    </style>

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

Values for Border


Name Values Description
border-width px e.g. 5px
thin
medium
thick
px px px px e.g. 5px 10px 5px 10px
Set the width of the border in pixels or inches.
border-top-width px e.g. 5px
thin
medium
thick
Set the width of the top border of an element in pixels or inches.
border-bottom-width px e.g. 5px
thin
medium
thick
Set the width of the bottom border of an element in pixels or inches.
border-left-width px e.g. 5px
thin
medium
thick
Set the width of the left border of an element in pixels or inches.
border-right-width px e.g. 5px
thin
medium
thick
Set the width of the left border of an element in pixels or inches.


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 12:52:21 PM
Terms Of Use | Privacy Statement | Copyright 2006-2015 © Independence Software LLP