---
schema_version: "1"
id: c44251ee267750cf8a707128e8b238f2396e9832e86c37775852ac53bef49a26
title: CSS for RTL Languages
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/apps/apps-css-rtl.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/apps-css-rtl.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: a3638b8d2058b4af41f1e7a232290c1322502cf8ec7ed6cea082fbc45a156867
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# CSS for RTL Languages

When your Language setting in Salesforce is set to a right-to-left (RTL) language, the framework automatically flips property names, such as `left` and `border-left` to `right` and `border-right` respectively. The framework also rearranges certain values like `padding`, `margin`, and `border-radius` so that the `right` and `left` units are swapped.

## Flipped CSS Properties

These properties are automatically flipped for RTL languages.

|Property|Flipped Property|
|--------|----------------|
|`left`|`right`|
|`right`|`left`|
|`border-left`|`border-right`|
|`border-left-color`|`border-right-color`|
|`border-left-style`|`border-right-style`|
|`border-left-width`|`border-right-width`|
|`border-right`|`border-left`|
|`border-right-color`|`border-left-color`|
|`border-right-style`|`border-left-style`|
|`border-right-width`|`border-left-width`|
|`border-top-left-radius`|`border-top-right-radius`|
|`border-top-right-radius`|`border-top-left-radius`|
|`border-bottom-left-radius`|`border-bottom-right-radius`|
|`border-bottom-right-radius`|`border-bottom-left-radius`|
|`padding-left`|`padding-right`|
|`padding-right`|`padding-left`|
|`margin-left`|`margin-right`|
|`margin-right`|`margin-left`|
|`nav-left`|`nav-right`|
|`nav-right`|`nav-left`|

## Flipped CSS Keywords

These keywords are automatically flipped for RTL languages.

|Keyword|Flipped Keyword|
|-------|---------------|
|`ltr`|`rtl`|
|`rtl`|`ltr`|
|`left`|`right`|
|`right`|`left`|
|`e-resize`|`w-resize`|
|`w-resize`|`e-resize`|
|`ne-resize`|`nw-resize`|
|`nw-resize`|`ne-resize`|
|`nesw-resize`|`nwse-resize`|
|`nwse-resize`|`nesw-resize`|
|`se-resize`|`sw-resize`|
|`sw-resize`|`se-resize`|

## Flipped CSS Percentage Values

If the value is a percentage for these properties, the flipped value is set to 100 minus the value.

-   `background`
-   `background-position`
-   `background-position-x`

## Flipped Property Arguments

For these properties that can take four values, the second and fourth values are swapped. For example, `property: A B C D` becomes `property: A D C B`.

-   `padding`
-   `margin`
-   `border-color`
-   `border-style`
-   `border-width`

## Flipped `border-radius` Arguments

The arguments for the `border-radius` property are flipped with these patterns.

|Arguments|Flipped Arguments|
|---------|-----------------|
|`border-radius: A B`|`border-radius: B A`|
|`border-radius: A B C`|`border-radius: B A C`|
|`border-radius: A B C D`|`border-radius: B A D C`|

## Override Flipping With `@noflip`

To override the automatic flipping, add a `/*@noflip*/` annotation in a comment directly before the property. For example:

```css
.THIS.mycontainer {
    /*@noflip*/ direction : rtl;
}
```

## Use Conditional CSS

Use the `@if(isRTL)` conditional statement to manually provide the appropriately oriented CSS for each direction.

```css
.THIS {
    transform: skew(28deg) translate3d(0, 0 , 0);
}

@if(isRTL) {
    .THIS {
        transform: skew(-28deg) translate3d(0, 0 , 0);
    }
}
```

**See Also**  


-   [*Salesforce Help*: Right-to-Left (RTL) Language Support](https://help.salesforce.com/articleView?id=faq_getstart_rtl.htm)