Submitted by layalk on Tue, 22/07/2014 - 11:07
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-leftThe 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-leftborder-radius: inherit
We will not cover the 2 valued radius length in this tutorial
Example:
border-radius: 10px 20px 30px 50px;
border-radius: 10px 50px;
border-radius: 50px 5px 20px; /* =50px 5px 20px 5px */
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;
border-radius: 50px 10px ;
border-radius: 5px 50px 5px 20px; /* RTLing from 50px 5px 20px 5px */
It's that simple!
Happy RTLing =)