Round Image with frames
Tags: css
Published: 2020-09-17 11:16:57

A round image makes a picture look soft.

We begin with adding code in html like this.
```
<img src="cat.jpg" alt="cat" class="roundImg"/>
```

##Round image 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wuncmmxcq8v2dnvd641o.png)
If you want a round image without any frame around the picture, then it is easy. 
Use the following code in css. 
```
.roundImg {
  border-radius: 50%;
}
```
The `border-radius` property defines the radius of the picture's corners. 
So, if you want to create a circle shape, use `border-radius: 50%`

##Round Image with One Frame
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z077ylgwd7znqo441n74.png)
add the size, style and color of `border` in your code.
```
.roundImg {
  border-radius: 50%;
  border: 5px solid #ff0000;
}
```
##Round Image with Double Frames
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vk91wxerug8yfou791an.png)
The code is similar with the round image with one frame. 
Now add one more line to the size of `border`. 
```
.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #ff000;
}
```
##Round Image, Double Frames with different border color
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ycytcoh7xdo036nv9lmq.png)
Sometimes you want to play with color on the frame of picture, to do so add `background-color` to your padding.
```
.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #ff000;
  background-color: #ffa500;
}
```
##Round Image with Double and Shadow
You also can play with `box-shadow` property to make another layer on the picture's frame. Because `border-radius` is set, the box shadow will take on the same rounded corners as border-radius.
Remember the syntax of `box-shadow` like this:
```
box-shadow: outset-x | offset-y | blur-radius | spread-radius | color;
```
Here is what a box-shadow declaration looks like:
```
.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #ffffff;
  background-color: #ffa500;
  box-shadow: 0 0 30px 30px #ffa500;
}
```
##Round Image with Triple Frame using Outline
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5qaiorp8m3aeuso4q3ru.png)
The outline property is a line that is drawn around the elements, outside the border. The outline property is not part of the box model, so it won't affect the position of the element itself or the element next to it.
The syntax of outline is (the order of the value does not matter.):
```
outline: color | style | width;
```
Outline does not respect `border-radius`. The outline is always rectangular by default, so we have to adjust the outline line to be a circular shape by adding `-moz-outline-radius` as below.
(The property `-moz-outline-radius` can be used with Firefox only. It does not work in other browsers.)
```
.roundImg {
  border-radius: 50%;
  padding: 10px;
  border: 5px solid #fff;
  background-color: #ffa500;
  outline: #ff0000 solid 8px;
  -moz-outline-radius: 50% 50% 50% 50%;
}
```
##Round Image with Triple Frame
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ma7inueuh2cn14n89r4t.png)
Another way to create a round image with a triple frame is by adding another html `div` cover to the image.
In html it is going to look like this:
```
<div>
    <img src="cat.jpg" alt="cat" class="roundImg"/>
</div>
```
Then customize the `div` to be the circular shape.
```
div {
  border-radius: 50%;
  background-color: #ff0000;
  height: 23rem;
  width: 23rem;
  margin: 2rem;
}
```
The challenge is that the size of image has to be a little bit smaller than size of the cover div and has to be exactly in the middle of the cover div.
```
.roundImg {
  border-radius: 50%;
  width: 20rem;
  height: 20rem;
  padding: 10px;
  border: 5px solid #fff;
  background-color: #ffa500;
  margin: 0.5rem;
}
```
And it is not like `outline`. The cover div is part of the box model. Whatever change you make in them, it will effect the adjacent elements.
##Special Thanks
This cat image is by <a href="https://pixabay.com/users/skeeze-272447/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1041324">skeeze</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1041324">Pixabay</a>.