How to Create Rounded Images with CSS

Rounded Images

How To, for Front End and Web Applications

By: Chrysanthus Date Published: 27 May 2025

This tutorial explains how to create rounded images with CSS. The image from the source is rectangular. It is CSS that obtains an inner round portion of the image, centered at the center of the rectangle. The center top and center bottom of the image are part of the image. The middle right and middle left of the image are also part of the image. Any other area towards the edges are not part (not shown) of the image.

At the end of this tutorial is the complete code. The reader should save the file with any name, but with the extension, .html. Then open the file in a browser to see (and appreciate rounded images). The images are in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have them downloaded to his/her home computer webpage. The reader is advised to do that before continuing to read this tutorial.

The Webpage Skeleton Code

The webpage skeleton code to which more useful code will be added is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Rounded Images</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">
        
        <style>

        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>

    </body>
    </html>

Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element in the head element is the style-sheet. It is very short, for this project. It is the main coding for each image. The JavaScript element will be left empty. The body element will have the image tags.

The HTML Body Element Content

The content of the HTML body element is:

        <h2>Rounded Images</h2>

        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.png" alt="Avatar" style="width:200px">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar2.png" alt="Image" style="width:200px">

Two image tags are there. At the source (website) of the images, the images are rectangles. Each image is given a width of 200px, specified in the image tag attribute, "style='width:200px' ". When a small size is specified for an image, the browser reduces the height of the image appropriately.

Secret

It is CSS that obtains an inner large round portion of the image. The center top and center bottom of the image are part of the image. The middle right and middle left of the image are also part of the image. Any other area towards the edges are not part (not shown) of the image.

Use a CSS rule to specify a border-radius of 50% for all the 4 corners of the image borders. With that, each circular arc will extend to the center or middle edges of the straight edges. Note that the border is not part of the image. All that produces a large central portion of the image.

The Stylesheet

The stylesheet is the content of the style element in the head element. It is just:

            img {
                 border-radius: 50%;
            }

That is all ! There is just one CSS rule, which is the image CSS rule. Notice the 50% for all the 4 border-radii. The border thickness for the images in this case is zero.

The Complete Webpage Code

And there you have it: the complete webpage code is:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Rounded Images</title>
        <link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Description of the Web Page.">
        
        <style>
            img {
                 border-radius: 50%;
            }
        </style>

        <script type="text/javascript">
        </script>
    </head>
    <body>
        <h2>Rounded Images</h2>

        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.png" alt="Image" style="width:200px">
        <img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar2.png" alt="Image" style="width:200px">
    </body>
    </html>

The reader should save the file with any name, but with the extension, .html. Then open the file in a browser to see (and appreciate rounded images). The images are in the https://broad-network.com/ website. So the reader should be hooked onto the Internet, in order to have them downloaded to his/her home computer webpage.

Chrys

Broad Network

Series Articles