You are here

Quick Tip: RTLing the CSS3 "border-radius" property

Here's a quick tip when RTLing one of the cool CSS3 properties: border-radius.

The syntax of the border-radius is as follows:

Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

The syntax of the first radius allows one to four values:

border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left

The syntax of the second radius also allows one to four values
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left

border-radius: inherit

We will not cover the 2 valued radius length in this tutorial

Example:

 border-radius: 10px 20px 30px 50px;
LTR
border-radius: 10px 50px;
LTR
border-radius: 50px 5px 20px; /* =50px 5px 20px 5px */
LTR

When RTLing, you need to switch the top-left value with the top-right value and bottom-left value with the bottom-right value to get an RTLed rounded box .

So after RTLing, the previous example will be:

 border-radius: 20px 10px 50px 30px;
RTL
border-radius: 50px 10px ;
RTL
border-radius: 5px 50px 5px 20px; /* RTLing from 50px 5px 20px 5px */
RTL

It's that simple!
Happy RTLing =)

Average: 3.6 (10 votes)