Logical properties
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.
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 |
- Previously available under a different name: -webkit-logical-height (8)
- Previously available under a different name: -webkit-logical-height (79)
- Previously available under a different name: -webkit-logical-height (5.1)
- Previously available under a different name: -webkit-logical-height (18)
- Previously available under a different name: -webkit-logical-height (5)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Previously available under a different name: -moz-border-end-color (3)
- Previously available under a different name: -moz-border-end-style (3)
- Previously available under a different name: -moz-border-end-width (3)
- Previously available under a different name: -moz-border-start-color (3)
- Previously available under a different name: -moz-border-start-style (3)
- Previously available under a different name: -webkit-logical-width (8)
- Previously available under a different name: -webkit-logical-width (79)
- Previously available under a different name: -webkit-logical-width (5.1)
- Previously available under a different name: -webkit-logical-width (18)
- Previously available under a different name: -webkit-logical-width (5)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- This feature was removed in a later browser version (63)
- Previously available under a different name: offset-block (41)
- This feature was removed in a later browser version (63)
- Previously available under a different name: offset-block-end (41)
- This feature was removed in a later browser version (63)
- Previously available under a different name: offset-block-start (41)
- This feature was removed in a later browser version (63)
- Previously available under a different name: offset-inline (41)
- This feature was removed in a later browser version (63)
- Previously available under a different name: offset-inline-end (41)
- This feature was removed in a later browser version (63)
- Previously available under a different name: offset-inline-start (41)
- Previously available under a different name: -webkit-margin-after (8)
- Previously available under a different name: -webkit-margin-after (79)
- Previously available under a different name: -webkit-margin-after (5.1)
- Previously available under a different name: -webkit-margin-after (18)
- Previously available under a different name: -webkit-margin-after (5)
- Previously available under a different name: -webkit-margin-before (8)
- Previously available under a different name: -webkit-margin-before (79)
- Previously available under a different name: -webkit-margin-before (5.1)
- Previously available under a different name: -webkit-margin-before (18)
- Previously available under a different name: -webkit-margin-before (5)
- Previously available under a different name: -webkit-margin-end (2)
- Previously available under a different name: -webkit-margin-end (79)
- Previously available under a different name: -moz-margin-end (3)
- Previously available under a different name: -webkit-margin-end (3)
- Previously available under a different name: -webkit-margin-end (18)
- Previously available under a different name: -webkit-margin-end (3)
- Previously available under a different name: -webkit-margin-start (2)
- Previously available under a different name: -webkit-margin-start (79)
- Previously available under a different name: -moz-margin-start (3)
- Previously available under a different name: -webkit-margin-start (3)
- Previously available under a different name: -webkit-margin-start (18)
- Previously available under a different name: -webkit-margin-start (3)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -webkit- (10.1)
- Available with a vendor prefix: -webkit- (10.3)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Available with a vendor prefix: -moz- (41)
- Previously available under a different name: -webkit-padding-end (2)
- Previously available under a different name: -webkit-padding-end (79)
- Previously available under a different name: -moz-padding-end (3)
- Previously available under a different name: -webkit-padding-end (3)
- Previously available under a different name: -webkit-padding-end (18)
- Previously available under a different name: -webkit-padding-end (3)
- Previously available under a different name: -webkit-padding-start (2)
- Previously available under a different name: -webkit-padding-start (79)
- Previously available under a different name: -moz-padding-start (3)
- Previously available under a different name: -webkit-padding-start (3)
- Previously available under a different name: -webkit-padding-start (18)
- Previously available under a different name: -webkit-padding-start (3)
Syntax
.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.
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.
Related links
Powered by web-features