Widely availableRecommended for modern UI systems that want better support for RTL and non-horizontal writing modes.

Overview

Logical properties size and space elements according to writing direction and block/inline flow rather than left/right or top/bottom assumptions. They help layouts adapt to different languages and writing modes.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
57
79
41
12.1
57
12.2
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
Other

The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.

87
87
66
14.1
87
14.5

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…

87
87
66
14.1
87
14.5

The border-block-end CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

The border-block-start CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

87
87
66
14.1
87
14.5

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…

87
87
66
14.1
87
14.5

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.

89
89
66
15
89
15

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.

89
89
66
15
89
15

The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

87
87
66
14.1
87
14.5

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…

87
87
66
14.1
87
14.5

The border-inline-end CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

The border-inline-start CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

69
79
41
12.1
69
12.2

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…

87
87
66
14.1
87
14.5

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…

87
87
66
14.1
87
14.5

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.

89
89
66
15
89
15

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.

89
89
66
15
89
15
CSS property
inline-end
118
118
55
15
118
15
inline-start
118
118
55
15
118
15
inline-end
118
118
55
15
118
15
inline-start
118
118
55
15
118
15
Other

The inline-size CSS property defines the size of an element's block along the inline axis. If the writing-mode is horizontal, it corresponds to the width; if the writing mode is vertical, it corresponds to the height. A related property is block-size, which defines the other dimension of the element.

57
79
41
12.1
57
12.2
CSS property
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
Other

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

87
87
66
14.1
87
14.5

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

87
87
63
14.1
87
14.5

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

87
87
63
14.1
87
14.5
CSS property
auto
87
87
41
14.1
87
14.5
Other

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

87
87
63
14.1
87
14.5
CSS property
auto
87
87
41
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
Other

The inset-inline CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and…

87
87
63
14.1
87
14.5

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

87
87
63
14.1
87
14.5
CSS property
auto
87
87
41
14.1
87
14.5
Other

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

87
87
63
14.1
87
14.5
CSS property
auto
87
87
41
14.1
87
14.5
auto
87
87
41
14.1
87
14.5
auto
87
87
66
14.1
87
14.5
Other

The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

87
87
66
14.1
87
14.5

The margin-block-end CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

69
79
41
12.1
69
12.2

The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

69
79
41
12.1
69
12.2

The margin-inline CSS shorthand property defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.

87
87
66
14.1
87
14.5

The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode,…

69
79
41
12.1
69
12.2

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

69
79
41
12.1
69
12.2

The max-block-size CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode. That is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width.

57
79
41
12.1
57
12.2
CSS property
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
Other

The max-inline-size CSS property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the max-width or the max-height property, depending on the value of writing-mode.

57
79
41
12.1
57
12.2
CSS property
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
Other

The min-block-size CSS property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.

57
79
41
12.1
57
12.2
CSS property
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
Other

The min-inline-size CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.

57
79
41
12.1
57
12.2
CSS property
fit-content
57
79
94
12.1
57
12.2
max-content
57
79
66
12.1
57
12.2
min-content
57
79
66
12.1
57
12.2
Other

The overflow-block CSS property sets what shows when content overflows the block start and block end edges of a box. This may be nothing, a scroll bar, or the overflow content.

135
135
69
26
135
26
CSS property
overlay
135
135
112
135
Other

The overflow-inline CSS property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.

135
135
69
26
135
26
CSS property
overlay
135
135
112
135
Other

The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

87
87
66
14.1
87
14.5

The padding-block-end CSS property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

69
79
41
12.1
69
12.2

The padding-block-start CSS property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

69
79
41
12.1
69
12.2

The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.

87
87
66
14.1
87
14.5

The padding-inline-end CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

69
79
41
12.1
69
12.2

The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.

69
79
41
12.1
69
12.2
1+Supported (version) Not supported Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-height (8)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-height (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-height (5.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-height (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-height (5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-border-end-color (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-border-end-style (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-border-end-width (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-border-start-color (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-border-start-style (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-width (8)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-width (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-width (5.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-width (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-logical-width (5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (63)
Implementation note
  • Previously available under a different name: offset-block (41)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (63)
Implementation note
  • Previously available under a different name: offset-block-end (41)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (63)
Implementation note
  • Previously available under a different name: offset-block-start (41)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (63)
Implementation note
  • Previously available under a different name: offset-inline (41)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (63)
Implementation note
  • Previously available under a different name: offset-inline-end (41)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (63)
Implementation note
  • Previously available under a different name: offset-inline-start (41)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-after (8)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-after (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-after (5.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-after (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-after (5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-before (8)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-before (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-before (5.1)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-before (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-before (5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-end (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-end (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-margin-end (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-end (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-end (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-end (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-start (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-start (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-margin-start (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-start (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-start (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-margin-start (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (10.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (10.3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -moz- (41)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-end (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-end (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-padding-end (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-end (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-end (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-end (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-start (2)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-start (79)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -moz-padding-start (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-start (3)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-start (18)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: -webkit-padding-start (3)

Syntax

CSS
.card {
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: 1.5rem;
  border-inline-start: 4px solid blue;
}

/* Logical width and height */
.sidebar {
  inline-size: 300px;
  block-size: 100%;
}

Live demo

margin-inline / padding-block

Logical properties Margin-inline / padding-block demo.

PreviewFullscreen

border-inline-start

Logical properties Border-inline-start demo.

PreviewFullscreen

inline-size / block-size

Logical properties Inline-size / block-size demo.

PreviewFullscreen

Use cases

  • Direction-aware spacing

    Use logical margins, padding, and borders so components adapt cleanly between LTR and RTL interfaces.

  • Reusable layout primitives

    Build components once and let writing mode changes affect them more naturally.

Cautions

  • Mixing physical and logical properties inconsistently can make the final layout hard to predict.
  • Adopting logical properties often works best when done systematically across a component set.

Accessibility

  • Direction-aware layout improves clarity for multilingual users and reduces bugs in RTL or vertical writing contexts.

Powered by web-features