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>
        div:nth-of-type(2)
        {
            writing-mode: vertical-lr;
        }
    </style>
</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>
    <div>border-block</div>
    <div>border-block</div>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("div");
            for(let myelement of myelements)
            {
                myelement.style.borderBlock = myparameter;
            }
        }
    </script>
</body>
</html>

17 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div:nth-of-type(2)
        {
            writing-mode: vertical-lr;
        }
    </style>
</head>
<body>
    <button>initial</button><br>
    <button value="solid red">color</button><br>
    <button>dashed</button>
    <button>dotted</button>
    <button>double</button>
    <button>groove</button>
    <button>hidden</button>
    <button>inset</button>
    <button>none</button>
    <button>outset</button>
    <button>ridge</button>
    <button>solid</button><br>
    <button value="solid 1px">length</button>
    <button value="solid medium">medium</button>
    <button value="solid thick">thick</button>
    <button value="solid thin">thin</button>
    <div>border-block</div>
    <div>border-block</div>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("div");
            for(let myelement of myelements)
            {
                myelement.style.borderBlock = myparameter;
            }
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

Syntax

CSS

JS

Values

Examples

1 · color

2 · line-style · dashed

3 · line-style · dotted

4 · line-style · double

5 · line-style · groove

6 · line-style · hidden

7 · line-style · inset

8 · line-style · none

9 · line-style · outset

10 · line-style · ridge

11 · line-style · solid

12 · line-width · length

13 · line-width · medium

14 · line-width · thick

15 · line-width · thin

16 · JS · Inline

17 · JS · Internal

Links

Properties

External