CODEWITHSUNDEEP
css
NodeReact020
NodeReact020

Reputation: 506

CSS - Making all images have a circular type border

In my project, I allow users to upload profile pictures. I want these pictures to have a circular border, like instagram profile pictures do. Does anybody know how to add this affect?

I have tried the border-radius property, however this makes some images with white/transparent backgrounds looking like they have been cropped, and doesn't have the expected outcome.

Does anybody know how to add a circular type border to any image that is upload by a user? Thank you.

HTML CODE:

.fixedImage {
    position: relative;
    left: 70px;
    width: 25px;
    top: 50px;
    height: 25px;
    border-radius: 50%;
}

Upvotes: 1

Views: 1700

Answers (3)

Paulie_D
Paulie_D

Reputation: 115046

Use a border and a box-shadow...

div {
  text-align: center;
  display: inline-block;
  padding: 2em 3em;
  border: 1px solid lightgrey;
  background: lightgreen;
}

img {
  display: block;
  border-radius: 50%;
  border: 5px solid transparent;
  box-shadow: 0 0 0 5px red;
}

.white {
  border-color: white;
}
<div>
  Transparent border
  <img src="http://www.fillmurray.com/g/150/150" alt="">
</div>

<div>
  White border
  <img src="http://www.fillmurray.com/g/150/150" alt="" class="white">
</div>

Upvotes: 4

Christian
Christian

Reputation: 5521

I think https://medium.com/@biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd3 is what you are looking for.

A div around the image gets the border-radius: 50%

HTML:

 <div class="image-cropper">
   <img src="https://www4.lunapic.com/editor/premade/transparent.gif">
 </div>

CSS:

img {
  height: 200px;
  width: 200px;
  padding: 20px;
}

.image-cropper {
  width: 240px; // it seems you need to add the padding twice here
  border-radius: 50%;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
}

Fiddle:

https://jsfiddle.net/bdL8zmu1/

Without background color:

https://jsfiddle.net/94z27bdL/

Upvotes: 0

DPAMonty
DPAMonty

Reputation: 181

Instead of img, you can use div and have your image in background. This will allow you to add a background color of your choice to avoid the transparency.

Example:

<div class="fixedImage" style="background-image: url(img.png)"></div>

CSS:

.fixedImage {
    position: relative;
    top: 50px;
    left: 70px;
    width: 100px;
    height: 100px;                                
    border-radius: 50%;
    background-color: #fff;
    background-size: 100px 100px;
}

Upvotes: 1

Related Questions