Round Images with CSS
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:
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.
Once this is done you could use the image on any background and it’s looks quite nice:
Hendrik Ebbers is the founder of Open Elements. He is a Java champion, a member of JSR expert groups and a JavaOne rockstar. Hendrik is a member of the Eclipse JakartaEE working group (WG) and the Eclipse Adoptium WG. In addition, Hendrik Ebbers is a member of the Board of Directors of the Eclipse Foundation.