CSS3 box-direction Property

Example

Display the children of a div box from right to left:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-direction:reverse;

/* Safari and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-direction:reverse;

/* W3C */
display:box;
box-orient:horizontal;
box-direction:reverse;
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The box-direction property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-box-direction property.

Safari and Chrome support an alternative, the -webkit-box-direction property.


Definition and Usage

The box-direction property specifies in which direction the children of a box are displayed.

Default value: normal
Inherited: no
Version: CSS3
JavaScript syntax: object.style.boxDirection="reverse"


Syntax

box-direction: normal|reverse|inherit;

Value Description
normal Display children in horizontally boxes from left to right, and children in vertically boxes from top to bottom
reverse Display children in horizontally boxes from right to left, and children in vertically boxes from bottom to top
inherit The value of the box-direction property should be inherited from the parent element