Xidipity

Knowledge Base

corner radius
Framework: Corner Radius
Xidipity WordPress Theme Knowledge Base Framework Content Header Image
All
none (ie. square)
 
  • class: cnr:arch-x
  • css: border-radius: 0%;

 

extra small
 
  • class: cnr:arch-x-sm
  • css: border-radius: 0.1666rem;

 

small
 
  • class: cnr:arch-sm
  • css: border-radius: 0.3333rem;

 

medium
 
  • class: cnr:arch-md
  • css: border-radius: 0.6666rem;

 

large
 
  • class: cnr:arch-lg
  • css: border-radius: 1rem;

 

round
 
  • class: cnr:arch-rd
  • css: border-radius: 50%;

 

Bottom
extra small
 
  • class: cnr:arch-bt-x-sm
  • css: border-radius: 0 0 0.1666rem 0.1666rem;

 

small
 
  • class: cnr:arch-bt-sm
  • css: border-radius: 0 0 0.3333rem 0.3333rem;

 

medium
 
  • class: cnr:arch-bt-md
  • css: border-radius: 0 0 0.6666rem 0.6666rem;

 

large
 
  • class: cnr:arch-bt-lg
  • css: border-radius: 0 0 1rem 1rem;

 

Left
extra small
 
  • class: cnr:arch-lt-x-sm
  • css: border-radius: 0.1666rem 0 0 0.1666rem;

 

small
 
  • class: cnr:arch-lt-sm
  • css: border-radius: 0.3333rem 0 0 0.3333rem;

 

medium
 
  • class: cnr:arch-lt-md
  • css: border-radius: 0.6666rem 0 0 0.6666rem;

 

large
 
  • class: cnr:arch-lt-lg
  • css: border-radius: 1rem 0 0 1rem;

 

Right
extra small
 
  • class: cnr:arch-rt-x-sm
  • css: border-radius: 0 0.1666rem 0.1666rem 0;

 

small
 
  • class: cnr:arch-rt-sm
  • css: border-radius: 0 0.3333rem 0.3333rem 0;

 

medium
 
  • class: cnr:arch-rt-md
  • css: border-radius: 0 0.6666rem 0.6666rem 0;

 

large
 
  • class: cnr:arch-rt-lg
  • css: border-radius: 0 1rem 1rem 0;

 

Abbreviations
AbbreviationDefinition
cnrcorner
btbottom
lglarge
ltleft
mdmedium
rdround
rtright
smsmall
tptop
xnone
x-sm

xtra small

 

Supported media
AbbreviationDefinition
all
sm)small
md)medium
lg)large
xl)extra large
Notes
 

All corner classes begin with “cnr” and are separated by a colon from it’s value. By default corners are square.


  • Since: v1.0.0

 

May 20, 2022