"image with four borders"
Bootstrap 3.3.0 Snippet by ashum499

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="outer"> <img src="data:image/jpeg;base64,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" alt="" class="img-responsive" /> <div class="border top"></div> <div class="border bottom"></div> <div class="border left"></div> <div class="border right"></div> </div> </div>
.outer{ display: flex; height: 300px; margin: 20px auto; position: relative; width: 20%; padding: 0 15px; } .outer img{ margin: auto; height: 100%; padding: 20px 0; } .border{ height: 50px; position: absolute; width: 50px; z-index: -1111111; border-color: red !important; } .border.top { left: 0; border-top: 3px solid; border-left: 3px solid; } .border.bottom { border-bottom: 3px solid; border-right: 3px solid; bottom: 0; right: 0; } .border.right { right: 0; border-top: 3px solid; border-right: 3px solid; } .border.left { left: 0; bottom: 0; border-bottom: 3px solid; border-left: 3px solid; }

Related: See More


Questions / Comments: