Search code examples
htmlcssborder

Border should not edge-to-edge with image

I am trying to archive with CSS as attached screenshot. Is there any way using borderproperty or any other way archive same as attached screenshot? The top-left and bottom-right border should not edge to edge with image. The border bar (#095B6F) should not aligned with image.

Trying to Archive

<style>
  .bordered {
    width: 50%; }

  .bordered .get { 
    border-color: #095B6F;
    border-style: solid;  
    border-width: 20px 20px 0px 0px; }
</style>

<div class="bordered">
   <img src="https://assets.imgix.net/hp/snowshoe.jpg?auto=compress&w=400&h=400" class="get">
</div>

Solution

  • An alternate way to do this is with the css box-shadow property:

    .bordered {
  width: 50%; }

.bordered .get { 
  margin: 20px 20px 0 0;
  box-shadow: 20px -20px #095B6F;
}
    <div class="bordered">
   <img src="https://assets.imgix.net/hp/snowshoe.jpg?auto=compress&w=400&h=400" class="get">
</div>