/ Web Frontends / Round Images with CSS

Round Images with CSS

Hendrik on 2016/02/04 - 10:43 in Web Frontends

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:
radius-example

1 POST COMMENT

Send Us A Message Here

Your email address will not be published. Required fields are marked *

1 Comments