metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Manage the display of the border using border utilities classes."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Border - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Border</a></li> <li class="toc-entry"> <a href="#_border_add">Add border</a> <ul> <li class="toc-entry"><a href="#_border_sides">Sides</a></li> </ul> </li> <li class="toc-entry"><a href="#_border_hide">Hide border</a></li> <li class="toc-entry"><a href="#_border_size">Border size</a></li> <li class="toc-entry"><a href="#_border_style">Border style</a></li> <li class="toc-entry"><a href="#_border_radius">Border radius</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Border</h1> <p class="text-leader"> Manage the display of the border using border utilities classes. </p>  <h3 id="_border_add">Add border</h3> <p> To create border add class <code>.border</code> to element. Default border <code>color</code> is <code>transparent</code>. To set border color you must use border color utilities <code>bd-*</code>, defined in <code>metro-colors.css</code> (details on <a href="colors.html#_additional_colors">Color utilities</a>) </p> <div class="example"> <div class="border bd-cyan mx-auto p-2 text-center" style="width: 220px;">Block</div> </div> <pre><code class="html"> <div class="border bd-cyan">Block</div> </code></pre> <h4 id="_border_sides">Border sides</h4> <p> You can add border to any sides with special classes: <code>.border-left</code>, <code>.border-right</code>, <code>.border-top</code>, <code>.border-bottom</code>, <code>.border-top-left</code>, <code>.border-left-top</code>, <code>.border-top-right</code>, <code>.border-right-top</code>, <code>.border-top-bottom</code>, <code>.border-bottom-top</code>, <code>.border-bottom-left</code>, <code>.border-left-bottom</code>, <code>.border-bottom-right</code>, <code>.border-right-bottom</code>, <code>.border-left-right</code>, <code>.border-right-дуае</code>, <code>.border-top-right-bottom</code>, <code>.border-right-bottom-left</code>, <code>.border-bottom-left-top</code>, <code>.border-left-top-right</code>, </p> <div class="example"> <div class="border-right-bottom-left bd-cyan mx-auto p-2 text-center" style="width: 220px;">Block</div> </div> <pre><code class="html"> <div class="border-right-bottom-left bd-cyan">Block</div> </code></pre> <h3 id="_border_hide">Hide border</h3> <p> You can hide border on element. Add one of classes: <code>.border-none</code>, <code>.border-left-none</code>, <code>.border-right-none</code>, <code>.border-top-none</code>, <code>.border-bottom-none</code>. </p> <p> Also you can set invisible border with class: <code>.border-visible-none</code>. </p> <div class="example"> <div class="border bd-cyan border-right-none border-bottom-none mx-auto p-2 text-center" style="width: 220px;">Block</div> </div> <pre><code class="html"> <div class="border bd-cyan border-right-none border-bottom-none">Block</div> </code></pre> <h3 id="_border_size">Border size</h3> <p> To set border size use special classes: <code>.border-size-*</code> where asterisk value from <code>1</code> to <code>10</code>. </p> <div class="example"> <div class="d-flex flex-equal-items"> <div class="border bd-cyan border-size-1 p-2 text-center m-1">Block</div> <div class="border bd-cyan border-size-2 p-2 text-center m-1">Block</div> <div class="border bd-cyan border-size-3 p-2 text-center m-1">Block</div> <div class="border bd-cyan border-size-4 p-2 text-center m-1">Block</div> <div class="border bd-cyan border-size-5 p-2 text-center m-1">Block</div> </div> </div> <pre><code class="html"> <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> </code></pre>  <h3 id="_border_style">Border style</h3> <p> You can set <code>border-style</code> with special utilities classes: <code>.border-solid</code>, <code>.border-dashed</code>, <code>.border-dotted</code>, <code>.border-double</code>, <code>.border-groove</code>, <code>.border-inset</code>, <code>.border-outset</code>, <code>.border-ridge</code>. </p> <div class="example"> <div class="d-flex flex-justify-between flex-wrap"> <div class="w-25 m-1 p-2 border bd-cyan border-solid border-size-6"></div> <div class="w-25 m-1 p-2 border bd-cyan border-dashed border-size-6"></div> <div class="w-25 m-1 p-2 border bd-cyan border-dotted border-size-6"></div> <div class="w-25 m-1 p-2 border bd-cyan border-double border-size-6"></div> <div class="w-25 m-1 p-2 border bd-cyan border-groove border-size-6"></div> <div class="w-25 m-1 p-2 border bd-cyan border-inset border-size-6"></div> <div class="w-25 m-1 p-2 border bd-cyan border-outset border-size-6"></div> <div class="w-25 m-1 p-2 border bd-cyan border-ridge border-size-6"></div> </div> </div> <pre><code class="html"> <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> </code></pre> <h3 id="_border_radius">Border radius</h3> <p> Metro 4 contains utilities classes for change <code>border-radius</code> property. </p> <ul> <li><code>.border-radius</code> - set border radius 0.25rem (default 4px)</li> <li><code>.border-radius-half</code> - set border radius to 50%</li> <li><code>.border-radius-1</code> to <code>.border-radius-10</code> - set border radius from 10% to 100%</li> </ul> <div class="example"> <div class="d-flex flex-equal-items"> <div class="m-1 p-2 border bd-cyan border-radius"></div> <div class="m-1 p-2 border bd-cyan border-radius-half"></div> <div class="m-1 p-2 border bd-cyan border-radius-1"></div> <div class="m-1 p-2 border bd-cyan border-radius-2"></div> <div class="m-1 p-2 border bd-cyan border-radius-3"></div> <div class="m-1 p-2 border bd-cyan border-radius-4"></div> </div> </div> <pre><code class="html"> <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> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>