smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
70 lines (67 loc) • 2.92 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Material Bootstrap Utilities Border | https://www.htmlelements.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
<script type="text/javascript" src="../../scripts/common.js"></script>
<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="../source/smart.element.js"></script>
<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
<script src="index.js"></script>
</head>
<body class="smart material viewport">
<h2 id="buttons">Material Bootstrap Utilities Border</h2><br />
<p>CSS for Border. Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
</p>
<h2>Additive</h2>
<div class="group">
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
</div>
<h2>Substractive</h2>
<div class="group">
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
</div>
<h2>Border color</h2>
<div>Change the border color using utilities built on our theme colors.</div>
<div class="group">
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
</div>
<h2>Border radius</h2>
<div>Add classes to an element to easily round its corners.</div>
<div class="group">
<span class="border rounded"></span>
<span class="border rounded-top"></span>
<span class="border rounded-right"></span>
<span class="border rounded-bottom"></span>
<span class="border rounded-left"></span>
<span class="border rounded-circle"></span>
<span class="border rounded-pill"></span>
<span class="border rounded-0"></span>
</div>
<h2>Sizes</h2>
<div>Use .rounded-lg or .rounded-sm for larger or smaller border-radius</div>
<span class="border rounded-sm"></span>
<span class="border rounded-lg"></span>
</body>
</html>