DEV Community

Cover image for Round Image with frames
W. Kasiban
W. Kasiban

Posted on

Round Image with frames

#css

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"/>
Enter fullscreen mode Exit fullscreen mode

Round image

Alt Text
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%;
}
Enter fullscreen mode Exit fullscreen mode

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
add the size, style and color of border in your code.

.roundImg {
  border-radius: 50%;
  border: 5px solid #ff0000;
}
Enter fullscreen mode Exit fullscreen mode

Round Image with Double Frames

Alt Text
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;
}
Enter fullscreen mode Exit fullscreen mode

Round Image, Double Frames with different border color

Alt Text
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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Round Image with Triple Frame using Outline

Alt Text
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;
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

Round Image with Triple Frame

Alt Text
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>
Enter fullscreen mode Exit fullscreen mode

Then customize the div to be the circular shape.

div {
  border-radius: 50%;
  background-color: #ff0000;
  height: 23rem;
  width: 23rem;
  margin: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 skeeze from Pixabay.

Top comments (0)