<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div><span></span></div>

div { position: relative; width: 100px; height: 100px; margin: 20px; border: 1px solid #000; } div:before { display: block; content: ""; width: 20px; height: 20px; position: absolute; top: -10px; left: -10px; border-top: 1px solid #000; border-left: 1px solid #000; } div:after { display: block; content: ""; width: 20px; height: 20px; position: absolute; top: -10px; right: -10px; border-top: 1px solid #000; border-right: 1px solid #000; } span:before { display: block; content: ""; width: 20px; height: 20px; position: absolute; bottom: -10px; left: -10px; border-bottom: 1px solid #000; border-left: 1px solid #000; } span:after { display: block; content: ""; width: 20px; height: 20px; position: absolute; bottom: -10px; right: -10px; border-bottom: 1px solid #000; border-right: 1px solid #000; }