1. Home

HTML DOM Style border Property

Add a border to a <div> element

Definition and Usage

The border property sets or returns up to three separate border properties, in a shorthand form.

With this property, you can set/return one or more of the following (in any order):

  • border-width
  • border-style
  • border-color

    • Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Property
    border 1.0 4.0 1.0 1.0 3.5

    Syntax

    Return the border property:

    object.style.border

    Set the border property:

    object.style.border = "width style color|initial|inherit"

    Property Values

    Parameter Description
    width Sets the width of the borders
    style Sets the style of the borders
    color Sets the color of the borders
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit

    Technical Details

    Default Value: not specified
    Return Value: A String, representing the border width, style and/or color of an element
    CSS Version CSS1

    More Examples

    Example

    Change the width, style and color of the border of a <div> element:

    document.getElementById("myDiv").style.border = "thin dotted red";

    Example

    Return the border property values of a <div> element:

    alert(document.getElementById("myDiv").style.border);

    Related Pages

    CSS tutorial: CSS Border

    CSS reference: border property

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US