CSS Features

Working Draft · css-borders

CSS Borders and Box Decorations Module

120 properties, 1 function, 3 types defined by this specification, 82 of them known to at least one browser (the others are badged Not in any browser yet).

Modern CSS features in this module: border-shape, corner-shape.

Read the Editor's Draft ↗ W3C Working Draft ↗

Each feature in detail

border

Property Baseline: widely availablesince January 2018

MDN The border CSS shorthand property sets an element's border. It sets the values of border-width, border-style, and border-color.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-width, border-style, border-color

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block

Property Baseline: widely availablesince March 2024

MDN The border-block CSS shorthand property sets the individual logical block border property values in a single place in the style sheet.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-block-start'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-start, border-block-end

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'border-top-clip'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-start-clip, border-block-end-clip

Specification ↗

border-block-color

Property Baseline: widely availablesince March 2024

MDN The border-block-color CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-top-color'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-start-color, border-block-end-color

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-end

Property Baseline: widely availablesince March 2024

MDN The border-block-end CSS shorthand property sets the individual logical block-end border property values in a single place in the style sheet.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-end-width, border-block-end-style, border-block-end-color

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-end-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-block-end-color

Property Baseline: widely availablesince March 2024

MDN The border-block-end-color CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-end-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-end-start-radius, border-end-end-radius

Specification ↗

border-block-end-style

Property Baseline: widely availablesince March 2024

MDN The border-block-end-style CSS property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-end-width

Property Baseline: widely availablesince March 2024

MDN The border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-start

Property Baseline: widely availablesince March 2024

MDN The border-block-start CSS shorthand property sets the individual logical block-start border property values in a single place in the style sheet.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-start-width, border-block-start-style, border-block-start-color

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-start-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-block-start-color

Property Baseline: widely availablesince March 2024

MDN The border-block-start-color CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-start-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-start-start-radius, border-start-end-radius

Specification ↗

border-block-start-style

Property Baseline: widely availablesince March 2024

MDN The border-block-start-style CSS property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-start-width

Property Baseline: widely availablesince March 2024

MDN The border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-style

Property Baseline: widely availablesince March 2024

MDN The border-block-style CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-top-style'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-start-style, border-block-end-style

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-block-width

Property Baseline: widely availablesince March 2024

MDN The border-block-width CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-top-width'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-start-width, border-block-end-width

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-bottom

Property Baseline: widely availablesince January 2018

MDN The border-bottom CSS shorthand property sets an element's bottom border. It sets the values of border-bottom-width, border-bottom-style and border-bottom-color.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-bottom-width, border-bottom-style, border-bottom-color

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-bottom-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-bottom-color

Property Baseline: widely availablesince January 2018

MDN The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-bottom-left-radius

Property Baseline: widely availablesince January 2018

MDN The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 4
Edge 12
Firefox 4
Safari 5
Chrome Android 18
Safari iOS 4.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-bottom-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-bottom-left-radius, border-bottom-right-radius

Specification ↗

border-bottom-right-radius

Property Baseline: widely availablesince January 2018

MDN The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 4
Edge 12
Firefox 4
Safari 5
Chrome Android 18
Safari iOS 4.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-bottom-style

Property Baseline: widely availablesince January 2018

MDN The border-bottom-style CSS property sets the line style of an element's bottom border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-bottom-width

Property Baseline: widely availablesince January 2018

MDN The border-bottom-width CSS property sets the width of the bottom border of an element.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'border-top-clip'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-clip, border-right-clip, border-bottom-clip, border-left-clip

Specification ↗

border-color

Property Baseline: widely availablesince January 2018

MDN The border-color CSS shorthand property sets the color of an element's border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

[ <color> | <image-1D> ]{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-color, border-right-color, border-bottom-color, border-left-color

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-end-end-radius

Property Baseline: widely availablesince March 2024

MDN The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 89
Edge 89
Firefox 66
Safari 15
Chrome Android 89
Safari iOS 15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-end-start-radius

Property Baseline: widely availablesince March 2024

MDN The border-end-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 89
Edge 89
Firefox 66
Safari 15
Chrome Android 89
Safari iOS 15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-image

Property Baseline: widely availablesince August 2019

MDN The border-image CSS shorthand property draws an image around a given element. It replaces the element's regular border.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("https://developer.mozilla.org/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
See individual properties
Inherited
no
Percentages
N/A
Computed value
See individual properties
Canonical order
per grammar
Animation type
See individual properties
Longhands
border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat

Browser support

Chrome 16
Edge 12
Firefox 15
Safari 6
Chrome Android 18
Safari iOS 6

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-image-outset

Property Baseline: widely availablesince August 2019

MDN The border-image-outset CSS property sets the distance by which an element's border image is set out from its border box.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("https://developer.mozilla.org/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

[ <length [0,∞]> | <number [0,∞]> ]{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
All elements, except internal table elements when border-collapse is collapse
Inherited
no
Percentages
N/A
Computed value
four values, each a number or absolute length
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 15
Edge 12
Firefox 15
Safari 6
Chrome Android 18
Safari iOS 6

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-image-repeat

Property Baseline: widely availablesince August 2019

MDN The border-image-repeat CSS property defines how the images for the sides and the middle part of the border image are scaled and tiled. The middle region can be displayed by using the keyword "fill" in the border-image-slice property.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("https://developer.mozilla.org/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

[ stretch | repeat | round | space ]{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
stretch
Applies to
All elements, except internal table elements when border-collapse is collapse
Inherited
no
Percentages
N/A
Computed value
two keywords, one per axis
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 15
Edge 12
Firefox 15
Safari 6
Chrome Android 18
Safari iOS 9.3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-image-slice

Property Baseline: widely availablesince August 2019

MDN The border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element's border image.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("https://developer.mozilla.org/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

[<number [0,∞]> | <percentage [0,∞]>]{1,4} && fill?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
100%
Applies to
All elements, except internal table elements when border-collapse is collapse
Inherited
no
Percentages
refer to size of the border image
Computed value
four values, each either a number or percentage; plus a fill keyword if specified
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 15
Edge 12
Firefox 15
Safari 6
Chrome Android 18
Safari iOS 6

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-image-source

Property Baseline: widely availablesince August 2019

MDN The border-image-source CSS property sets the source image used to create an element's border image.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("https://developer.mozilla.org/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

none | <image>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
All elements, except internal table elements when border-collapse is collapse
Inherited
no
Percentages
N/A
Computed value
the keyword none or the computed <image>
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 15
Edge 12
Firefox 15
Safari 6
Chrome Android 18
Safari iOS 6

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-image-width

Property Baseline: widely availablesince August 2019

MDN The border-image-width CSS property sets the width of an element's border image.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("https://developer.mozilla.org/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

Syntax

[ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
1
Applies to
All elements, except internal table elements when border-collapse is collapse
Inherited
no
Percentages
Relative to width/height of the border image area
Computed value
four values, each either a number, the keyword auto, or a computed <length-percentage> value
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 16
Edge 12
Firefox 13
Safari 6
Chrome Android 18
Safari iOS 6

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline

Property Baseline: widely availablesince March 2024

MDN The border-inline CSS shorthand property sets the individual logical inline border property values in a single place in the style sheet.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-block-start'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-start, border-inline-end

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'border-top-clip'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-start-clip, border-inline-end-clip

Specification ↗

border-inline-color

Property Baseline: widely availablesince March 2024

MDN The border-inline-color CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-top-color'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-start-color, border-inline-end-color

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-end

Property Baseline: widely availablesince March 2024

MDN The border-inline-end CSS shorthand property sets the individual logical inline-end border property values in a single place in the style sheet.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-end-width, border-inline-end-style, border-inline-end-color

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-end-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-inline-end-color

Property Baseline: widely availablesince March 2024

MDN The border-inline-end-color CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-end-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-start-end-radius, border-end-end-radius

Specification ↗

border-inline-end-style

Property Baseline: widely availablesince March 2024

MDN The border-inline-end-style CSS property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-end-width

Property Baseline: widely availablesince March 2024

MDN The border-inline-end-width CSS property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-start

Property Baseline: widely availablesince March 2024

MDN The border-inline-start CSS shorthand property sets the individual logical inline-start border property values in a single place in the style sheet.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-start-width, border-inline-start-style, border-inline-start-color

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-start-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-inline-start-color

Property Baseline: widely availablesince March 2024

MDN The border-inline-start-color CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-start-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-start-start-radius, border-end-start-radius

Specification ↗

border-inline-start-style

Property Baseline: widely availablesince March 2024

MDN The border-inline-start-style CSS property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-start-width

Property Baseline: widely availablesince March 2024

MDN The border-inline-start-width CSS property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 69
Edge 79
Firefox 41
Safari 12.1
Chrome Android 69
Safari iOS 12.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-style

Property Baseline: widely availablesince March 2024

MDN The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-top-style'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-start-style, border-inline-end-style

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-inline-width

Property Baseline: widely availablesince March 2024

MDN The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

Syntax

<'border-top-width'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-start-width, border-inline-end-width

Browser support

Chrome 87
Edge 87
Firefox 66
Safari 14.1
Chrome Android 87
Safari iOS 14.5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-left

Property Baseline: widely availablesince January 2018

MDN The border-left CSS shorthand property sets all the properties of an element's left border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-left-width, border-left-style, border-left-color

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-left-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-left-color

Property Baseline: widely availablesince January 2018

MDN The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-left-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-left-radius, border-bottom-left-radius

Specification ↗

border-left-style

Property Baseline: widely availablesince January 2018

MDN The border-left-style CSS property sets the line style of an element's left border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-left-width

Property Baseline: widely availablesince January 2018

MDN The border-left-width CSS property sets the width of the left border of an element.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-limit

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

all | [ sides | corners ] <length-percentage [0,∞]>? | [ top | right | bottom | left ] <length-percentage [0,∞]>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
all
Applies to
all elements, except table element when border-collapse is collapse
Inherited
no
Percentages
relative to border-box
Computed value
as specified
Canonical order
per grammar
Animation type
discrete

Specification ↗

border-radius

Property Baseline: widely availablesince January 2018

MDN The border-radius CSS shorthand property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

Browser support

Chrome 4
Edge 12
Firefox 4
Safari 5
Chrome Android 18
Safari iOS 4.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-right

Property Baseline: widely availablesince January 2018

MDN The border-right CSS shorthand property sets all the properties of an element's right border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-right-width, border-right-style, border-right-color

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-right-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-right-color

Property Baseline: widely availablesince January 2018

MDN The border-right-color CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties border-color or border-right.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-right-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-right-radius, border-bottom-right-radius

Specification ↗

border-right-style

Property Baseline: widely availablesince January 2018

MDN The border-right-style CSS property sets the line style of an element's right border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-right-width

Property Baseline: widely availablesince January 2018

MDN The border-right-width CSS property sets the width of the right border of an element.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-shape

Property Limited availability Experimental Modern CSS: border-shape

MDN The border-shape CSS property defines an element's border shape using basic-shape values.

Live preview Example from MDN 
html {
  height: 100%;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  box-sizing: border-box;
  font-family: "Helvetica", "Arial";
  font-size: 1.6rem;
  padding: 40px 50px;
  background-color: chartreuse;
  display: flex;
  align-items: center;
}

p {
  width: fit-content;
  aspect-ratio: 1/1;
  border: 15px solid black;
  box-shadow: 5px 5px 10px rgb(0 0 0 / 0.5);
  border-shape: circle(50%);
}

Syntax

none | [ <basic-shape> <geometry-box>?]{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
see prose
Computed value
list, each item a computed color
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 147
Edge 147
Firefox No
Safari No
Chrome Android 147
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-start-end-radius

Property Baseline: widely availablesince March 2024

MDN The border-start-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 89
Edge 89
Firefox 66
Safari 15
Chrome Android 89
Safari iOS 15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-start-start-radius

Property Baseline: widely availablesince March 2024

MDN The border-start-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 89
Edge 89
Firefox 66
Safari 15
Chrome Android 89
Safari iOS 15

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-style

Property Baseline: widely availablesince January 2018

MDN The border-style CSS shorthand property sets the line style for all four sides of an element's border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Syntax

<'border-top-style'>{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-style, border-right-style, border-bottom-style, border-left-style

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-top

Property Baseline: widely availablesince January 2018

MDN The border-top CSS shorthand property sets all the properties of an element's top border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: darkmagenta;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width> || <line-style> || <color>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
See individual properties
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-width, border-top-style, border-top-color

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-top-clip

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

none | [ <length-percentage [0,∞]> | <flex> ]+

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
refer to length of border-edge side
Computed value
none, or a list consisting of absolute lengths, or percentages as specified
Canonical order
per grammar
Animation type
by computed value

Specification ↗

border-top-color

Property Baseline: widely availablesince January 2018

MDN The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<color> | <image-1D>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
the computed color and/or a one-dimensional image function
Canonical order
per grammar
Animation type
see prose

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-top-left-radius

Property Baseline: widely availablesince January 2018

MDN The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 4
Edge 12
Firefox 4
Safari 5
Chrome Android 18
Safari iOS 4.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-top-radius

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length-percentage [0,∞]>{1,2} [ / <length-percentage [0,∞]>{1,2} ]?

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-left-radius, border-top-right-radius

Specification ↗

border-top-right-radius

Property Baseline: widely availablesince January 2018

MDN The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

Live preview Example from MDN 
#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Syntax

<border-radius>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
pair of computed <length-percentage> values
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 4
Edge 12
Firefox 4
Safari 5
Chrome Android 18
Safari iOS 4.2

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-top-style

Property Baseline: widely availablesince January 2018

MDN The border-top-style CSS property sets the line style of an element's top border.

Live preview Example from MDN 
#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

Syntax

<line-style>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
specified keyword
Canonical order
per grammar
Animation type
discrete

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-top-width

Property Baseline: widely availablesince January 2018

MDN The border-top-width CSS property sets the width of the top border of an element.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<line-width>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
medium
Applies to
all elements except ruby base containers and ruby annotation containers
Inherited
no
Percentages
N/A
Computed value
absolute length, snapped as a border width
Canonical order
per grammar
Animation type
by computed value

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 1

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

border-width

Property Baseline: widely availablesince January 2018

MDN The border-width CSS shorthand property sets the width of an element's border.

Live preview Example from MDN 
#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntax

<'border-top-width'>{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-width, border-right-width, border-bottom-width, border-left-width

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

box-shadow

Property Baseline: widely availablesince January 2018

MDN The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Live preview Example from MDN 
#example-element {
  margin: 20px auto;
  padding: 0;
  border: 2px solid #333333;
  width: 80%;
  text-align: center;
}

Syntax

<spread-shadow>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
N/A
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
box-shadow-color, box-shadow-offset, box-shadow-blur, box-shadow-spread, box-shadow-position

Browser support

Chrome 10
Edge 12
Firefox 4
Safari 5.1
Chrome Android 18
Safari iOS 5

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

box-shadow-blur

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length [0,∞]>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements
Inherited
no
Percentages
N/A
Computed value
list, each item a <length>
Canonical order
per grammar
Animation type
by computed value

Specification ↗

box-shadow-color

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<color>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
currentcolor
Applies to
all elements
Inherited
no
Percentages
N/A
Computed value
list, each item a computed color
Canonical order
per grammar
Animation type
by computed value

Specification ↗

box-shadow-offset

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

[ none | <length>{1,2} ]#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
none
Applies to
all elements
Inherited
no
Percentages
N/A
Computed value
list, each item either none or a pair of offsets (horizontal and vertical) from the element‘s box
Canonical order
per grammar
Animation type
by computed value, treating none as 0 0 when interpolated with non-none values.

Specification ↗

box-shadow-position

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

[ outset | inset ]#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
outset
Applies to
all elements
Inherited
no
Percentages
N/A
Computed value
list, each item one of the keywords
Canonical order
per grammar
Animation type
by computed value

Specification ↗

box-shadow-spread

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<length>#

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements
Inherited
no
Percentages
N/A
Computed value
list, each item a <length>
Canonical order
per grammar
Animation type
by computed value

Specification ↗

corner

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-shape'> || <'border-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-shape, border-radius

Specification ↗

corner-block-end

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-end-radius, corner-block-end-shape

Specification ↗

corner-block-end-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-block-end-shape CSS property specifies the shape of both the corners on a box's block-end edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 80px / 40px;
  corner-block-end-shape: notch square;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-end-start-shape, corner-end-end-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-block-start

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-block-start-radius, corner-block-start-shape

Specification ↗

corner-block-start-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-block-start-shape CSS property specifies the shape of both the corners on a box's block-start edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: goldenrod;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 40px 60px;
  corner-block-start-shape: scoop notch;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-start-start-shape, corner-start-end-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-bottom

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-bottom-radius, corner-bottom-shape

Specification ↗

corner-bottom-left

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-bottom-left-radius, corner-bottom-left-shape

Specification ↗

corner-bottom-left-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-bottom-left-shape CSS property specifies the shape of a box's bottom-left corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: goldenrod;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 80px 40% 60px 20%;
  corner-bottom-left-shape: squircle;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-bottom-right

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-bottom-right-radius, corner-bottom-right-shape

Specification ↗

corner-bottom-right-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-bottom-right-shape CSS property specifies the shape of a box's bottom-right corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 30% / 20%;
  corner-bottom-right-shape: notch;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-bottom-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-bottom-shape CSS property specifies the shape of both the corners on a box's bottom edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px 30px 20% 40%;
  corner-bottom-shape: square squircle;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-bottom-left-shape, corner-bottom-right-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-end-end

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-end-end-radius, corner-end-end-shape

Specification ↗

corner-end-end-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-end-end-shape CSS property specifies the shape of a box's block-end and inline-end corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px;
  corner-end-end-shape: squircle;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-end-start

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-end-start-radius, corner-end-start-shape

Specification ↗

corner-end-start-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-end-start-shape CSS property specifies the shape of a box's block-end and inline-start corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px / 20%;
  corner-end-start-shape: bevel;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-inline-end

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-end-radius, corner-inline-end-shape

Specification ↗

corner-inline-end-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-inline-end-shape CSS property specifies the shape of both the corners on a box's inline-end edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 15% 30%;
  corner-inline-end-shape: bevel squircle;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-start-end-shape, corner-end-end-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-inline-start

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-inline-start-radius, corner-inline-start-shape

Specification ↗

corner-inline-start-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-inline-start-shape CSS property specifies the shape of both the corners on a box's inline-start edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px;
  corner-inline-start-shape: square bevel;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-start-start-shape, corner-end-start-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-left

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-left-radius, corner-left-shape

Specification ↗

corner-left-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-left-shape CSS property specifies the shape of both the corners on a box's left-hand edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 20px 40px / 60px 80px;
  corner-left-shape: notch bevel;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-top-left-shape, corner-bottom-left-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-right

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-right-radius, corner-right-shape

Specification ↗

corner-right-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-right-shape CSS property specifies the shape of both the corners on a box's right-hand edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 20% 30% / 50% 40%;
  corner-right-shape: square scoop;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-top-right-shape, corner-bottom-right-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-shape CSS shorthand property specifies the shape of a box's corners, within the area specified by its border-radius property value.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

@supports not (corner-shape: scoop) {
  body {
    all: unset !important;
  }

  body::before {
    content: "Your browser does not support the 'corner-shape' property.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 0;
  }
}

div {
  height: 180px;
  box-shadow: 1px 1px 3px gray;
  border-radius: 30px;
  corner-shape: scoop;
}

Syntax

<'corner-top-left-shape'>{1,4}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-start-end

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-start-end-radius, corner-start-end-shape

Specification ↗

corner-start-end-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-start-end-shape CSS property specifies the shape of a box's block-start and inline-end corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: cyan;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 20px 40px 60px 80px;
  corner-start-end-shape: notch;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-start-start

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-start-start-radius, corner-start-start-shape

Specification ↗

corner-start-start-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-start-start-shape CSS property specifies the shape of a box's block-start and inline-start corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: goldenrod;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 40% 10px 10px;
  corner-start-start-shape: scoop;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-top

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-shape'> || <'border-top-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-radius, corner-top-shape

Specification ↗

corner-top-left

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-left-radius, corner-top-left-shape

Specification ↗

corner-top-left-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-top-left-shape CSS property specifies the shape of a box's top-left corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 25% 100px;
  corner-top-left-shape: scoop;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-top-right

Property Not in any browser yet

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

Syntax

<'corner-top-left-shape'> || <'border-top-left-radius'>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
0
Applies to
all elements (but see prose)
Inherited
no
Percentages
Refer to corresponding dimension of the border box.
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
border-top-right-radius, corner-top-right-shape

Specification ↗

corner-top-right-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-top-right-shape CSS property specifies the shape of a box's top-right corner, within its border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px;
  corner-top-right-shape: bevel;
}

Syntax

<corner-shape-value>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
round
Applies to
all elements where border-radius can apply
Inherited
no
Percentages
n/a
Computed value
the corresponding superellipse() value
Canonical order
per grammar
Animation type
see superellipse interpolation

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

corner-top-shape

Property Limited availability Experimental Modern CSS: corner-shape

MDN The corner-top-shape CSS property specifies the shape of both the corners on a box's top edge, within their border-radius area.

Live preview Example from MDN 
body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: goldenrod;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px;
  corner-top-shape: scoop notch;
}

Syntax

<'corner-top-left-shape'>{1,2}

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Definition

Initial
see individual properties
Applies to
see individual properties
Inherited
see individual properties
Percentages
see individual properties
Computed value
see individual properties
Canonical order
per grammar
Animation type
see individual properties
Longhands
corner-top-left-shape, corner-top-right-shape

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

superellipse()

Function Limited availability Experimental Modern CSS: corner-shape

MDN The superellipse() CSS function defines the curvature of an ellipse, and is used to specify corner shapes either directly, or via <corner-shape-value> keywords.

Live preview Example from MDN 
html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  width: fit-content;
  margin: 20px auto;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 100%;
  margin-top: 20px;
}

form div {
  margin-top: 5px;
  display: flex;
}

section {
  width: 100%;
  height: 180px;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

section {
  box-shadow: 1px 1px 3px gray;
}

Syntax

superellipse(<number> | infinity | -infinity)

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

<corner-shape-value>

Type Limited availability Experimental Modern CSS: corner-shape

MDN The <corner-shape-value> CSS data type describes the shape of a container corner. It is used by the corner-shape shorthand property and its constituent properties to specify the shape to apply to affected container corners.

Live preview Example from MDN 
html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  width: fit-content;
  margin: 20px auto;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

select {
  padding: 3px 5px;
}

form div:nth-of-type(2) {
  margin-top: 5px;
  display: flex;
}

section {
  width: 100%;
  height: 180px;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

section {
  box-shadow: 1px 1px 3px gray;
}

Syntax

round | scoop | bevel | notch | square | squircle | <superellipse()>

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 139
Edge 139
Firefox Preview
Safari Preview
Chrome Android 139
Safari iOS No

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

<line-style>

Type Baseline: widely availablesince January 2018

MDN The <line-style> enumerated value type represents keyword values that define the style of a line, or the lack of a line. The <line-style> keyword values are used in the following longhand and shorthand border and gap decoration properties:

Live preview Example from MDN 
div {
  display: flex;
  gap: 1em;
  list-style: none;
  align-items: center;
}
div:first-of-type {
  display: none;
}

p:first-of-type {
  text-align: center;
  line-height: 5em;
}
p {
  width: 10em;
  height: 5em;
  background-color: palegoldenrod;
}

p {
  padding: 5px;
  border: double 7px #bada55;
}
p + p {
  columns: 3;
  column-gap: 20px;
  column-rule: double 7px;
  border-color: black;
}
.none p {
  border-style: none;
  column-rule-style: none;
}
.hidden p {
  border-style: hidden;
  column-rule-style: hidden;
}
.dotted p {
  border-style: dotted;
  column-rule-style: dotted;
}
.dashed p {
  border-style: dashed;
  column-rule-style: dashed;
}
.solid p {
  border-style: solid;
  column-rule-style: solid;
}
.double p {
  border-style: double;
  column-rule-style: double;
}
.groove p {
  border-style: groove;
  column-rule-style: groove;
}
.ridge p {
  border-style: ridge;
  column-rule-style: ridge;
}
.inset p {
  border-style: inset;
  column-rule-style: inset;
}
.outset p {
  border-style: outset;
  column-rule-style: outset;
}

Syntax

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗

<line-width>

Type Baseline: widely availablesince January 2018

MDN The <line-width> enumerated value type represents the length or keyword value that defines the width of a line, or the lack of a line. The <line-width> keyword values are used in the following longhand and shorthand properties:

Live preview Example from MDN 
section {
  display: flex;
  gap: 10px;
}
div {
  flex: 0 0 15%;
  border-style: solid;
  border-color: purple;
  text-align: center;
}
[data-width="hairline"] {
  border-width: hairline;
}

[data-width="thin"] {
  border-width: thin;
}

[data-width="medium"] {
  border-width: medium;
}

[data-width="thick"] {
  border-width: thick;
}

[data-width="10px"] {
  border-width: 10px;
}

@supports not (border-width: hairline) {
  body::before {
    content: "Your browser does not support the 'hairline' value.";
    color: black;
    background-color: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

Syntax

<length [0,∞]> | hairline | thin | medium | thick

Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.

Browser support

Chrome 1
Edge 12
Firefox 1
Safari 1
Chrome Android 18
Safari iOS 3

First version with support, from MDN browser-compat-data.

Specification ↗ MDN reference ↗