CODEWITHSUNDEEP
htmlcss
davigzzz
davigzzz

Reputation: 136

How to create an assymetrical border around image with css?

So I have an image and I would like to create a border around it. Each side of the border i want it to be different length. Here is what I am trying to achieve (blue border): enter image description here

As you can see, the blue border has different lengths on all its sides. How can I make such a border?

Upvotes: 0

Views: 65

Answers (2)

Raul Leaño Martinet
Raul Leaño Martinet

Reputation: 2113

You can use "after" and "before" on the different containers of the image to create this kind of effect.

https://jsfiddle.net/theylooksotired/w0s4xmc0/42395/

.image {
  display: inline-block;
  position: relative;
}

.image:after {
  position: absolute;
  content: '';
  width: 80%;
  height: 1px;
  background: red;
  bottom: -5px;
  right: 0;
}

.image:before {
  position: absolute;
  content: '';
  width: 1px;
  height: 100%;
  background: blue;
  top: -5px;
  right: 0;
}
<div class="image">
  <img src="http://dazedimg.dazedgroup.netdna-cdn.com/1112/azure/dazed-prod/1150/1/1151968.jpg" width="200" height="130" />
</div>

Upvotes: 0

Turnip
Turnip

Reputation: 36632

I can't think of a way to do this without adding a couple of extra container elements around the img.

This might get you somewhere close to effect you are looking for...

.container {
  text-align: right;
  position: relative;
  padding: 20px;
  overflow: hidden;
}

.shrinkwrap {
  float: right; /* Shrink to fit img */
  position: relative;
}

.container img {
  display: block; /* Remove bottom spacing */
}

/* Top/Right border */
.container::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 0;
  border-top: 1px solid blue;
  border-right: 1px solid blue;
}

/* Bottom/Left border */
.shrinkwrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid blue;
  border-left: 1px solid blue;
}
<div class="container">
  <div class="shrinkwrap">
    <img src="https://placehold.it/300x300">
  </div> 
</div>

It should work with any size image.

If you use percentage based dimensions on the .shrinkwrap element you can make it responsive...

.container {
  text-align: right;
  position: relative;
  padding: 20px;
  overflow: hidden;
}

.shrinkwrap {
  float: right; /* Shrink to fit img */
  position: relative;
  width: 50%;
}

.container img {
  display: block; /* Remove bottom spacing */
  width: 100%;
}

/* Top/Right border */
.container::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 0;
  border-top: 1px solid blue;
  border-right: 1px solid blue;
}

/* Bottom/Left border */
.shrinkwrap::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border-bottom: 1px solid blue;
  border-left: 1px solid blue;
}
<div class="container">
  <div class="shrinkwrap">
    <img src="https://placehold.it/300x300">
  </div> 
</div>

Upvotes: 1

Related Questions