CSS Playroom
Animations
Box Model
Flexbox
Grid
Filters
Positioning
Pseudo classes
Transforms
Coming Soon...
P
Pseudo elements
S
Scroll
T
Transitions
Properties
Edit and configure box model properties.
Reset
View code
box-sizing
content-box
border-box
content
width
px
%
em
rem
fr
vh
vw
height
px
%
em
rem
fr
vh
vw
padding
top
px
%
em
rem
fr
vh
vw
right
px
%
em
rem
fr
vh
vw
bottom
px
%
em
rem
fr
vh
vw
left
px
%
em
rem
fr
vh
vw
border-top
px
%
em
rem
fr
vh
vw
border-top-style
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top-color
border-right
px
%
em
rem
fr
vh
vw
border-right-style
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-right-color
border-bottom
px
%
em
rem
fr
vh
vw
border-bottom-style
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-bottom-color
border-left
px
%
em
rem
fr
vh
vw
border-left-style
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-left-color
margin
top
px
%
em
rem
fr
vh
vw
right
px
%
em
rem
fr
vh
vw
bottom
px
%
em
rem
fr
vh
vw
left
px
%
em
rem
fr
vh
vw
Comprehensive guide to box model
here
and
here