border-block

The border-block CSS property is shorthand for border-block-color, border-block-style, and border-block-width.

Syntax

CSS

border-block: value;

JS

object.style.borderBlock = "value";

Values

<'border-block'> = <'border-block-start'>

<'border-block-start'> = <'border-top-width'> || <'border-top-style'> || <color>

<'border-top-width'> = <line-width>

<line-width> = <length [0,∞]> | thin | medium | thick

<length>

Specifies the length using a number followed by a unit of measurement.

thin

A thin line.

medium

A medium line.

thick

A thick line.

<'border-top-style'> = <line-style>

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

dashed

A dashed line. A series of square-ended dashes.

dotted

A dotted line. A series of round dots.

double

A double line. Two parallel solid lines with some space between them.

groove

A grooved line. Looks as if it were carved in the canvas.

hidden

A hidden line. Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables.

inset

An inset line. Looks as if the content on the inside of the border is sunken into the canvas.

none

No line.

outset

An outset line. Looks as if the content on the inside of the border is coming out of the canvas.

ridge

A ridged line. Looks as if it were coming out of the canvas.

solid

A single line.

<color>

Specifies the color using a keyword or a numerical specification.

<!doctype html>
<html>
<head>
    <style>
        p
        {
            margin: 0;
        }
        p:nth-of-type(2)
        {
            writing-mode: vertical-lr;
        }
    </style>
    <script>
        function myfunction(myvar)
        {
            var elements = document.querySelectorAll("p");
            for(var element of elements)
            {
                element.style.borderBlock = myvar;
            }
        }
    </script>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button><br>
    <button onmouseover="myfunction(value)" value="solid red">color</button><br>
    <button onmouseover="myfunction(innerHTML)">dashed</button>
    <button onmouseover="myfunction(innerHTML)">dotted</button>
    <button onmouseover="myfunction(innerHTML)">double</button>
    <button onmouseover="myfunction(innerHTML)">groove</button>
    <button onmouseover="myfunction(innerHTML)">hidden</button>
    <button onmouseover="myfunction(innerHTML)">inset</button>
    <button onmouseover="myfunction(innerHTML)">none</button>
    <button onmouseover="myfunction(innerHTML)">outset</button>
    <button onmouseover="myfunction(innerHTML)">ridge</button>
    <button onmouseover="myfunction(innerHTML)">solid</button><br>
    <button onmouseover="myfunction(value)" value="solid 1px">length</button>
    <button onmouseover="myfunction(value)" value="solid medium">medium</button>
    <button onmouseover="myfunction(value)" value="solid thick">thick</button>
    <button onmouseover="myfunction(value)" value="solid thin">thin</button>
    <p>border-block</p>
    <p>border-block</p>
</body>
</html>

Syntax

CSS

JS

Values

Examples

color

line-style | dashed

line-style | dotted

line-style | double

line-style | groove

line-style | hidden

line-style | inset

line-style | none

line-style | outset

line-style | ridge

line-style | solid

line-width | length

line-width | medium

line-width | thick

line-width | thin

JS

Links

Internal

External