Round Image with frames

W. Kasiban — Thu, 17 Sep 2020 11:16:57 +0000

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

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

add the size, style and color of border in your code.

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

Round Image with Double Frames

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

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

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

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

DEV Community: W. Kasiban