Kempo CSS
Theme Editor
Borders & Spacing
Borders
<div class="b">b</div>
<div class="bt">bt</div>
<div class="br">br</div>
<div class="bb">bb</div>
<div class="bl">bl</div>
<div class="bx">bx</div>
<div class="by">by</div>b
bt
br
bb
bl
bx
by
*Additional styles applied for demonstration purposes.
Border Radius
<!-- All corners -->
<div class="r">r</div>
<div class="round">round</div>
<!-- Individual corners -->
<div class="rtl">rtl</div>
<div class="rtr">rtr</div>
<div class="rbr">rbr</div>
<div class="rbl">rbl</div>
<!-- Side combinations -->
<div class="rt">rt</div>
<div class="rb">rb</div>
<div class="rl">rl</div>
<div class="rr">rr</div>r
round
rtl
rtr
rbr
rbl
rt
rb
rl
rr
*Additional styles applied for demonstration purposes.
Border Radius Classes
| Class | Description |
|---|---|
r |
All corners (0.25rem) |
round |
Fully rounded (9999rem) |
rtl |
Top-left corner only |
rtr |
Top-right corner only |
rbr |
Bottom-right corner only |
rbl |
Bottom-left corner only |
rt |
Top corners (left + right) |
rb |
Bottom corners (left + right) |
rl |
Left corners (top + bottom) |
rr |
Right corners (top + bottom) |
Note: Add 0 suffix (e.g.,
r0, rt0) to cancel border radius.
Padding
Color Legend
- Green = Padding
- Orange = Margins
- Red = Negative Margins
- Red Border = Cancelled Margins
*Additional styles applied for demonstration purposes.
<div class="p">p</div>
<div class="pt">pt</div>
<div class="pr">pr</div>
<div class="pb">pb</div>
<div class="pl">pl</div>
<div class="px">px</div>
<div class="py">py</div>p
pt
pr
pb
pl
px
py
Margins
<div class="m">m</div>
<div class="mt">mt</div>
<div class="mr">mr</div>
<div class="mb">mb</div>
<div class="ml">ml</div>
<div class="mx">mx</div>
<div class="my">my</div>m
mt
mr
mb
ml
mx
my
Negative Margins
<div class="-m">-m</div>
<div class="-mt">-mt</div>
<div class="-mr">-mr</div>
<div class="-mb">-mb</div>
<div class="-ml">-ml</div>
<div class="-mx">-mx</div>
<div class="-my">-my</div>-m
-mt
-mr
-mb
-ml
-mx
-my
Cancelled Margins
<div class="m m0">m m0</div>
<div class="m mt0">m mt0</div>
<div class="m mr0">m mr0</div>
<div class="m mb0">m mb0</div>
<div class="m ml0">m ml0</div>
<div class="m mx0">m mx0</div>
<div class="m my0">m my0</div>
m m0
m mt0
m mr0
m mb0
m ml0
m mx0
m my0