You are here: Reference > JavaScript > client-side > style handling > properties > borderLeft

borderLeft style property

Browser support:
Specifies or returns the color, style and width properties for the element's left border, in a shorthand form.
Available border styles:

border-left-style: dotted
border-left-style: dashed
border-left-style: solid
border-left-style: double
border-left-style: inset
border-left-style: outset
border-left-style: groove
border-left-style: ridge
border-left-style: window-inset


You can find the related objects in the Supported by objects section below.
This property is read/write.
CSS page for this property: border-left

Possible values:

The type of this property is string.
 One of the following values: 
 Any of the following values (use the space character to separate them, each value can be used only once): 

Description of values:

Specifies or returns the color of the element's left border.
Specifies or returns the style of the element's left border.
Specifies or returns the width of the element's left border.
Takes the value of this property from the computed style of the parent element.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the border-left property:
        .example {
            border-left: 1px solid blue;
    <div class="example">Border-left: 1px solid blue</div>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the borderLeft property in JavaScript:
    <script type="text/javascript">
        function ChangeBorder () {
            var selectTags = document.getElementsByTagName ("select");
            var selectState = [];
            for (i = 0; i < selectTags.length; i++) {
                // Returns the index of the selected option
                whichSelected = selectTags[i].selectedIndex;

                // Returns the text of the selected option
                selectState[i] = selectTags[i].options[whichSelected].text;

            var div = document.getElementById ("myDiv");
   = selectState[0] + " " + selectState[1] + " " + selectState[2];
    <div id="myDiv" style="border-left: 1px solid blue">Sample division with border-left</div>

    <select onchange="ChangeBorder ();" size="5">
        <option selected="selected" />1px
        <option />3px
        <option />8px
        <option />15px
        <option />24px
    <select onchange="ChangeBorder ();" size="10">
        <option />dotted
        <option />dashed
        <option />double
        <option />groove
        <option />inset
        <option />none
        <option />outset
        <option />ridge
        <option selected="selected" />solid
        <option />window-inset
    <select onchange="ChangeBorder ();" size="8">
        <option selected="selected" />blue
        <option />red
        <option />cyan
        <option />white
        <option />green
        <option />yellow
        <option />purple
        <option />black
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content