CSS Border Previewer
Global settings
Control border property separately?
No
Yes
Control border radius property separately?
No
Yes
Borders settings
Width
Unit
px
cm
em
rem
Style
None
Dashed
Dotted
Double
Groove
Hidden
Inset
Outset
Ridge
Solid
Color
Border-top settings
Width
Unit
px
cm
em
rem
Style
None
Dashed
Dotted
Double
Groove
Hidden
Inset
Outset
Ridge
Solid
Color
Border-right settings
Width
Unit
px
cm
em
rem
Style
None
Dashed
Dotted
Double
Groove
Hidden
Inset
Outset
Ridge
Solid
Color
Border-bottom settings
Width
Unit
px
cm
em
rem
Style
None
Dashed
Dotted
Double
Groove
Hidden
Inset
Outset
Ridge
Solid
Color
Border-left settings
Width
Unit
px
cm
em
rem
Style
None
Dashed
Dotted
Double
Groove
Hidden
Inset
Outset
Ridge
Solid
Color
Border-radius settings
First radius:
Value
Unit
px
%
em
rem
Second radius:
Value
Unit
px
%
em
rem
Border-top-left-radius settings
First radius:
Value
Unit
px
%
em
rem
Second radius:
Value
Unit
px
%
em
rem
Border-top-right-radius settings
First radius:
Value
Unit
px
%
em
rem
Second radius:
Value
Unit
px
%
em
rem
Border-bottom-left-radius settings
First radius:
Value
Unit
px
%
em
rem
Second radius:
Value
Unit
px
%
em
rem
Border-bottom-right-radius settings
First radius:
Value
Unit
px
%
em
rem
Second radius:
Value
Unit
px
%
em
rem
Copy to the clipboard