Border
Manage the display of the border using border utilities classes.
Add border
To create border add class .border
to element. Default border color
is transparent
.
To set border color you must use border color utilities bd-*
, defined in metro-colors.css
(details on Color utilities)
<div class="border bd-cyan">Block</div>
Border sides
You can add border to any sides with special classes:
.border-left
,
.border-right
,
.border-top
,
.border-bottom
,
.border-top-left
, .border-left-top
,
.border-top-right
, .border-right-top
,
.border-top-bottom
, .border-bottom-top
,
.border-bottom-left
, .border-left-bottom
,
.border-bottom-right
, .border-right-bottom
,
.border-left-right
, .border-right-дуае
,
.border-top-right-bottom
,
.border-right-bottom-left
,
.border-bottom-left-top
,
.border-left-top-right
,
<div class="border-right-bottom-left bd-cyan">Block</div>
Hide border
You can hide border on element. Add one of classes:
.border-none
,
.border-left-none
,
.border-right-none
,
.border-top-none
,
.border-bottom-none
.
Also you can set invisible border with class: .border-visible-none
.
<div class="border bd-cyan border-right-none border-bottom-none">Block</div>
Border size
To set border size use special classes: .border-size-*
where asterisk value from 1
to 10
.
<div class="border bd-cyan border-size-1">Block</div>
<div class="border bd-cyan border-size-2">Block</div>
<div class="border bd-cyan border-size-3">Block</div>
<div class="border bd-cyan border-size-4">Block</div>
<div class="border bd-cyan border-size-5">Block</div>
Border style
You can set border-style
with special utilities classes:
.border-solid
,
.border-dashed
,
.border-dotted
,
.border-double
,
.border-groove
,
.border-inset
,
.border-outset
,
.border-ridge
.
<div class="border-solid"></div>
<div class="border-dashed"></div>
<div class="border-dotted"></div>
<div class="border-double"></div>
<div class="border-groove"></div>
<div class="border-inset"></div>
<div class="border-outset"></div>
<div class="border-ridge"></div>
Border radius
Metro 4 contains utilities classes for change border-radius
property.
.border-radius
- set border radius 0.25rem (default 4px).border-radius-half
- set border radius to 50%.border-radius-1
to.border-radius-10
- set border radius from 10% to 100%
<div class="border bd-cyan border-radius"></div>
<div class="border bd-cyan border-radius-half"></div>
<div class="border bd-cyan border-radius-1"></div>
<div class="border bd-cyan border-radius-2"></div>
<div class="border bd-cyan border-radius-3"></div>
<div class="border bd-cyan border-radius-4"></div>