CODEWITHSUNDEEP
htmlcss
SBel
SBel

Reputation: 3359

Image in a circle

Suppose I have the following image:

enter image description here

On my website I want to surround it with a circle like this:

enter image description here

Question: Is it possible to do this with CSS/how? If yes, which option is better, physically making an image with the circle or using CSS?

Upvotes: 0

Views: 223

Answers (3)

Jaykumar Patel
Jaykumar Patel

Reputation: 27624

Yes, you can create using CSS

check this live jsFiddle

HTML

<div id="outbody">
    <img class="img-circle" src="https://i.sstatic.net/Ysyvw.png">
</div>

CSS

#outbody
{
    width:35%;  
    padding:10px;    
    background-color:#fe0000;
}
.img-circle {
  width: 90%;
  border: 10px solid white;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%; 
            border-radius: 50%;

       -webkit-box-shadow: 0 0px 15px rgba(0,0,0,1);  
          -moz-box-shadow: 0 0px 15px rgba(0,0,0,1);  
               box-shadow: 0 0px 15px rgba(0,0,0,1);
}

Upvotes: 3

Erik J. Sturcke
Erik J. Sturcke

Reputation: 178

If you would like to inner drop shadow, you can use the inset option with the box-shadow.

JSFiddle Demo

HTML

<div class=circle>
    <div class=image>
</div>

CSS

.circle {
   background : red;
   display    : inline-block;
}

.circle .image {
    margin              : 10px;
    border-radius       : 50%;
    width               : 250px;
    height              : 250px;
    box-shadow          : inset 0 0 30px #000000;
    background-image    : url(https://i.sstatic.net/Ysyvw.png);
    background-position : 50%;
}

Upvotes: 0

mahmoud nezar sarhan
mahmoud nezar sarhan

Reputation: 756

in addition to @Jay Patel scenario you can try this out :

HTML

<div id="container">
<img class="img-circle" src="https://i.sstatic.net/Ysyvw.png" />
</div>

CSS

.img-circle {
  width: 90%;
  border: 10px solid white;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%; 
            border-radius: 50%;

       -webkit-box-shadow: 0 5px 12px rgba(0,0,0,1);  
          -moz-box-shadow: 0 5px 12px rgba(0,0,0,1);  
               box-shadow: 0 5px 12px rgba(0,0,0,1);
}
#container
{
    background-color:red;
    width:35%;
    padding:10px;
}

Demo : here

Upvotes: 0

Related Questions