---
# System prepended metadata

title: PID-936

---

1. To round the edges of an image in HTML, you can set the `border-radius` property to 50% or use an equal width and height for the image. This property defines the radius of an element's corners, and can be used to add rounded corners to images [3][4].
    Here's an example of how to add rounded corners to an image in HTML using the `border-radius` property:
    ```html
    <img src="image.jpg" alt="My Image" style="border-radius: 50%;">
    ```
    In this example, the `border-radius` property is set to `50%`, making the image circular. Lower values of `border-radius` can be used to make the edges less rounded [1].
    Alternatively, a class can be added to the image, and the `border-radius` property can be applied to the class in the CSS file. This way, the styles will only target elements with that class [2].
    HTML:
    ```html
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <img src="image.jpg" alt="My Image" class="circular-image">
    </body>
    </html>
    ```
2. To make an image circular using CSS, you can set the border-radius property to 50% or use an equal width and height for the image. Here's how you can do it:
    HTML:
    ```
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <img src="image.jpg" alt="My Image" class="circular-image">
    </body>
    </html>
    ```
    CSS (styles.css):
    ```css
    /* Make the image circular */
    .circular-image {
        border-radius: 50%;
        width: 200px; /* Adjust the width and height as needed */
        height: 200px;
    }
    ```
    In this code:
    * We use an external CSS file (`styles.css`) for better organization.
    * We apply the `border-radius` property to the `.circular-image` class and set it to `50%`. This creates a circular shape for the image.
    * We set the `width` and `height` properties to the same value to ensure the image appears as a perfect circle. You can adjust the `width` and `height` to control the size of the circular image.
    Using the border-radius property with a value of 50%, you can easily create a circular image in HTML and CSS. Adjust the width and height properties as needed to customize the size of the circular image.
    This will add rounded corners to the image with a radius of `30px`. The `border-radius` property can also be used to add different radii to different corners of the image [2][6].
    ```css
    /* Apply different radii to each corner */
    .rounded-image {
        border-top-left-radius: 20px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 5px;
        width: 200px; /* Adjust the width and height as needed */
        height: 200px;
    }
    ```
    By using this approach, you can customize the corner radii individually for more complex shapes.
3. Alternate Approach:
    SVG Clipping:
    You can use Scalable Vector Graphics (SVG) to create complex shapes for clipping the image. SVG allows you to define custom paths to create intricate rounded shapes. Here's an example of a circular clipping path using SVG:
    ```html
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            /* Apply the SVG clipping path */
            .rounded-image {
                clip-path: url(#circle-clip);
                width: 200px; /* Adjust the width and height as needed */
                height: 200px;
            }
        </style>
    </head>
    <body>
        <svg width="0" height="0" style="position:absolute;visibility:hidden;">
            <defs>
                <clipPath id="circle-clip">
                    <circle cx="100" cy="100" r="100"/> <!-- Adjust the circle's parameters -->
                </clipPath>
            </defs>
        </svg>
        <img src="image.jpg" alt="My Image" class="rounded-image">
    </body>
    </html>
    ```
    In this example, we use an SVG `clip-path` with a circular shape defined by the `<circle>` element. You can adjust the circle's parameters to control the roundness and size.