CSS direction Property

The direction property defines the text direction.

The direction property sets the base text direction of block-level elements and the direction of embeddings which are created by the unicode-bidi property. It also sets the text's default alignment of block-level elements and the direction that cells flow within a table row.

The text direction is usually specified inside a document, like the dir attribute of HTML, instead of the direct use of the direction property. In contrast to the HTML dir attribute, the CSS direction property is not inherited into table cells from the table columns, because table cells aren’t within the columns, they are inside of rows.

The direction property has no any effect on inline-level elements.
Initial Value ltr
Applies to All elements.
Inherited Yes.
Animatable Discrete.
Version CSS2
DOM Syntax object.style.direction = "rtl";


direction: ltr | rtl | initial | inherit;

Example of the direction property:

<!DOCTYPE html>
    <title>Title of the document</title>
      div {
        direction: rtl;
    <p>As you can see, this text is written with default direction.</p>
    <div>However, this text is written from right to left as we defined.</div>


 CSS direction Property

In the given example the "rtl" value is used. The text goes from right to left.


Value Description Play it
ltr Means that the direction of text will be from left to right. This is the default value of the property. Play it »
rtl Means that the direction of text will be from right to left. Play it »
initial Sets the property to its default value. Play it »
inherit Inherits the property from its parent element.

Browser support

chrome edge firefox safari opera
2.0+ 12.0+ 1.0+ 1.3+ 9.2+

Practice Your Knowledge

What does the CSS 'direction' property does?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?