CODEWITHSUNDEEP
htmlcssimage
Brian Kalski
Brian Kalski

Reputation: 957

Adjusting border around image requires changing height and width

I have the following image with a circular border. I want to be able to change the size (diameter) of the border but in order to do so I have to change the width and height of the image in addition to the border. Is it possible to change the border size without having to change the other attributes as well? Here is my html and css class. Thanks.

<div><img class="marker"></div>

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: absolute;
    border:solid 50px rgba(50, 105, 206, 0.5);
    border-radius:150px;
    cursor: pointer;
  }

map marker

Upvotes: 1

Views: 2319

Answers (3)

Attila
Attila

Reputation: 1177

To achieve what you want, replace your border property with this:

box-shadow: 0 0 0 50px rgba(50, 105, 206, 0.5);

With this, you can change the size of the "border" by changing the spread option in the box-shadow property (i.e. the 50px value).

See my example: https://jsbin.com/viyihah/edit?html,css,output

You can read more about the box-shadow property on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow, but essentially the first 3 properties that I've set to 0 are offset-x, offset-y and blur-radius (thus the shadow will be centered on the element and won't appear blurred, but solid) while the 50px value is the spread-radius, which essentially determines the size of the "border." The last value is simply the color.

Upvotes: 3

Rahul
Rahul

Reputation: 4364

you can play with border-width and border-radius:50%; to make it round every time 

.marker {
    width:150px;
    height:150px;
    transform: rotate(50deg) !important;
    position: relative;
    border:solid 100px rgba(50, 105, 206, 0.5);
    border-radius:50%;
    cursor: pointer;
  }
  .marker.sm{
    border-width: 10px;

  }
<div><img class="marker" src="https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png"></div>


<div><img class="marker sm" src="https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_960_720.png"></div>

Upvotes: 0

Turnip
Turnip

Reputation: 36652

Reset the element's box-sizing property to the default content-box.

Most likely you have some CSS elsewhere that is changing it to border-box

.marker {
  width: 150px;
  height: 150px;
  transform: rotate(50deg) !important;
  /* position: absolute; */
  border: solid 50px rgba(50, 105, 206, 0.5);
  border-radius: 150px;
  cursor: pointer;
  box-sizing: content-box;
}

.marker-alt {
  box-sizing: border-box;
}
<div><img class="marker"></div>

<div><img class="marker marker-alt"></div>

Upvotes: 2

Related Questions