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”:
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: