IMG-LOGO

How to create rounded image using CSS3?

andy - 18 Jan, 2019 2720 Views 0 Comment

In this tutorial you will learn on how to create a rounded image in CSS3. We will use CSS property called border-radius to create this rounded image effect. One of the criteria to make a perfect rounded image is the image need to have the same height and width dimension. Otherwise, it will not create a perfect rounded image.

So what would happen if you do not have the same width and height dimension? Well, you can manually set the width and height of the image to be the same. Once the dimension has been set, it should be good enough to go.

Let's get started with the front end code first. We will use the image of our tutorial logo for this example. As you can see the below image does not have the same dimension size.

We then make a small change on the code by adding a class tag attribute into the image. We will set the css class name as rounded-img. Here is the full html code.

<img class="rounded-img" src="https://bytutorial.com/assets/listingimages/599/1143_css-3-border-radius.jpg"/>

The rounded-img css class will be defined into our css style below.

<style>
	.rounded-img{
		width:100px;
		height:100px;
		border-radius:50%;
	}
</style>

You can see the demo of the rounded image below. Pretty easy right?

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to draw a circle in CSS?

In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.