Open Elements – Round Images with CSS

Warning This article is outdated and may contain incorrect information.

In this post I will show the easiest way how a rounded image can be defined in CSS. This example is for HTML. If you want to create a rounded image with JavaFX you should read this post.

An image is defined by the img tag. To define some CSS for the image we should add a style class like “avatar”:

<img class="avatar" src="dude.png">

In this first example I will show how you can define a rounded image for a square image. To do so we define the size of the image in CSS:

.avatar {
    width: 64px;
    height: 64px;
}

Once this is done it’s quite easy to create the round effect by defining a rounded border. Here the radius of the border must be defined as the half width / height. In addition we could define a border color and a border width to add a visual contrast.

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: lightgrey;
}

Once this is done you could use the image on any background and it’s looks quite nice:

radius-example

Round Images with CSS

Hendrik Ebbers