<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main> <div class="card"> <div class="outline-box outline-auto"></div> <code>outline-style: auto</code> </div> <div class="card"> <div class="outline-box outline-double"></div> <code>outline-style: double</code> </div> <div class="card"> <div class="outline-box outline-dotted-1"></div> <code>outline-style: dotted</code> </div> <div class="card"> <div class="outline-box outline-dotted-2"></div> <code>outline-style: dotted</code> </div> <div class="card"> <div class="outline-box outline-groove"></div> <code>outline-style: groove</code> </div> <div class="card"> <div class="outline-box outline-dashed"></div> <code>outline-style: dashed</code> </div> <div class="card"> <div class="outline-box outline-ridge"></div> <code>outline-style: ridge</code> </div> <div class="card"> <div class="outline-box outline-outset"></div> <code>outline-style: outset</code> </div> <div class="card"> <div class="outline-box outline-inset"></div> <code>outline-style: inset</code> </div> </main

.outline-auto { background-color: aliceblue; outline: 50px auto lavender; } .outline-double { background-color: thistle; outline: 14px double white; outline-offset: -20px; } .outline-dotted-1 { background-color: mistyrose; outline: 24px dotted white; outline-offset: -12px; } .outline-dotted-2 { background-color: lightgoldenrodyellow; outline: 40px dotted white; outline-offset: -18px; } .outline-groove { background-color: antiquewhite; outline: 14px groove burlywood; outline-offset: -15px; } .outline-dashed { background-color: rosybrown; outline: 22px dashed white; outline-offset: -12px; } .outline-ridge { background-color: azure; outline: 14px ridge lightblue; outline-offset: -14px; } .outline-outset { background-color: floralwhite; outline: 24px outset pink; outline-offset: -24px; } .outline-inset { background-color: bisque; outline: 24px inset sandybrown; outline-offset: -24px; } /* presentation styles*/ main { display: grid; height: 100%; grid-template-rows: auto 1fr auto; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); text-align: center; } .card { margin-bottom: 50px; } .outline-box { margin: 40px auto; width: 180px; height: 180px; } code { background-color: #dedede; padding: 4px 6px; border-radius: 3px; }