Home »
CSS
Change image shapes with CSS
In this article, we will learn how to alter or change image shapes with CSS and display them on our webpage?
Submitted by Abhishek Pathak, on October 21, 2017
Images are integral part of a webpage. They should explain a lot of words in a brief way and it is equally important that they look good in terms of design and flow with the text. With CSS we can take care of the design.
In this article, we will learn how to change the shapes of an image and display them with the text in a nice format?
By default an image is a rectangle dimension. It is the default behaviour of the browser. Here is a code for simple image that looks simple by default.
<img class="image" src="image.jpg">
Now in order to change its shape we need to apply CSS on it and the results will be mind-blowing. We will be transforming this default shape into circle.
Code-CSS
.image {
width: 100px;
height: 100px;
border-radius: 50%;
}
In this code, we are turning the image into a circle. First we select the image using the .image selector and then apply properties in it.
The width and height properties on this element, displays the element on the webpage in this specified dimension. Finally, we apply the border-radius property to 50% which will change this shape into circle.
Here is a demo,
DEMO
HTML with CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Center Image</title>
<style>
.image {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Default</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg" alt="" width="200" height="200">
<h1>With border-radius applied</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg" alt="" class="image">
</body>
</html>
Output
CSS Tutorial & Examples »