Logical properties
Widely available
CSS logical properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, block-end refers to the bottom. Also known as flow relative.
Compatibility (view on caniuse.com)
- Chrome 89 Released on 2021-03-02
- Chrome Android 89 Released on 2021-03-02
- Edge 89 Released on 2021-03-04
- Firefox 66 Released on 2019-03-19
- Firefox for Android 66 Released on 2019-03-19
- Safari 15 Released on 2021-09-20
- Safari on iOS 15 Released on 2021-09-20
MDN docs
- block-size property
- border-block property
- border-block-color property
- border-block-end property
- border-block-end-color property
- border-block-end-style property
- border-block-end-width property
- border-block-start property
- border-block-start-color property
- border-block-start-style property
- border-block-start-width property
- border-block-style property
- border-block-width property
- border-end-end-radius property
- border-end-start-radius property
- border-inline property
- border-inline-color property
- border-inline-end property
- border-inline-end-color property
- border-inline-end-style property
- border-inline-end-width property
- border-inline-start property
- border-inline-start-color property
- border-inline-start-style property
- border-inline-start-width property
- border-inline-style property
- border-inline-width property
- border-start-end-radius property
- border-start-start-radius property
- inline-size property
- inset property
- inset-block property
- inset-block-end property
- inset-block-start property
- inset-inline property
- inset-inline-end property
- inset-inline-start property
- margin-block property
- margin-block-end property
- margin-block-start property
- margin-inline property
- margin-inline-end property
- margin-inline-start property
- max-block-size property
- max-inline-size property
- min-block-size property
- min-inline-size property
- padding-block property
- padding-block-end property
- padding-block-start property
- padding-inline property
- padding-inline-end property
- padding-inline-start property
Specifications
BCD data
- css.properties.block-size
- css.properties.block-size.fit-content
- css.properties.block-size.max-content
- css.properties.block-size.min-content
- css.properties.border-block
- css.properties.border-block-color
- css.properties.border-block-end
- css.properties.border-block-end-color
- css.properties.border-block-end-style
- css.properties.border-block-end-width
- css.properties.border-block-start
- css.properties.border-block-start-color
- css.properties.border-block-start-style
- css.properties.border-block-start-width
- css.properties.border-block-style
- css.properties.border-block-width
- css.properties.border-end-end-radius
- css.properties.border-end-start-radius
- css.properties.border-inline
- css.properties.border-inline-color
- css.properties.border-inline-end
- css.properties.border-inline-end-color
- css.properties.border-inline-end-style
- css.properties.border-inline-end-width
- css.properties.border-inline-start
- css.properties.border-inline-start-color
- css.properties.border-inline-start-style
- css.properties.border-inline-start-width
- css.properties.border-inline-style
- css.properties.border-inline-width
- css.properties.border-start-end-radius
- css.properties.border-start-start-radius
- css.properties.clear.inline-end
- css.properties.clear.inline-start
- css.properties.float.inline-end
- css.properties.float.inline-start
- css.properties.inline-size
- css.properties.inline-size.fit-content
- css.properties.inline-size.max-content
- css.properties.inline-size.min-content
- css.properties.inset
- css.properties.inset-block
- css.properties.inset-block-end
- css.properties.inset-block-end.auto
- css.properties.inset-block-start
- css.properties.inset-block-start.auto
- css.properties.inset-block.auto
- css.properties.inset-inline
- css.properties.inset-inline-end
- css.properties.inset-inline-end.auto
- css.properties.inset-inline-start
- css.properties.inset-inline-start.auto
- css.properties.inset-inline.auto
- css.properties.inset.auto
- css.properties.margin-block
- css.properties.margin-block-end
- css.properties.margin-block-start
- css.properties.margin-inline
- css.properties.margin-inline-end
- css.properties.margin-inline-start
- css.properties.max-block-size
- css.properties.max-block-size.fit-content
- css.properties.max-block-size.max-content
- css.properties.max-block-size.min-content
- css.properties.max-inline-size
- css.properties.max-inline-size.fit-content
- css.properties.max-inline-size.max-content
- css.properties.max-inline-size.min-content
- css.properties.min-block-size
- css.properties.min-block-size.fit-content
- css.properties.min-block-size.max-content
- css.properties.min-block-size.min-content
- css.properties.min-inline-size
- css.properties.min-inline-size.fit-content
- css.properties.min-inline-size.max-content
- css.properties.min-inline-size.min-content
- css.properties.padding-block
- css.properties.padding-block-end
- css.properties.padding-block-start
- css.properties.padding-inline
- css.properties.padding-inline-end
- css.properties.padding-inline-start