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>