New toolFree · No signup

CSS Logical Properties Converter

Logical properties adapt to writing-mode, direction, and text-orientation — making your CSS work correctly in RTL, vertical, and other non-LTR layouts. Paste your physical CSS on the left and get the logical equivalent on the right, with a full property reference below.

Share on X LinkedIn

13 properties converted

Physical CSS

Logical CSS

Logical Properties Output

.container {  inline-size: 640px;  min-block-size: 200px;  margin-block-start: 1.5rem;  margin-block-end: 1.5rem;  margin-inline-start: auto;  margin-inline-end: auto;  padding-inline-start: 1.5rem;  padding-inline-end: 1.5rem;  border-inline-start: 3px solid #1D9E75;  border-start-start-radius: 8px;  border-end-start-radius: 8px;  text-align: start;  overflow-inline: hidden;}

Property reference

Physical (LTR)	Logical equivalent
margin-top / bottom	margin-block-start / end
margin-left / right	margin-inline-start / end
padding-top / bottom	padding-block-start / end
padding-left / right	padding-inline-start / end
border-top / bottom	border-block-start / end
border-left / right	border-inline-start / end
border-top-left-radius	border-start-start-radius
border-bottom-left-radius	border-end-start-radius
top / bottom	inset-block-start / end
left / right	inset-inline-start / end
width / height	inline-size / block-size
min/max-width	min/max-inline-size
min/max-height	min/max-block-size
overflow-x / y	overflow-inline / block
text-align: left/right	text-align: start/end
float: left/right	float: inline-start/end