How to set border radius to an image in an HTML page

HTML Image Border Radius Using CSS

The CSS border-radius property is used to set a border radius to an image in a webpage.

It is used to specify the border radius to the border of an image in a webpage.

Example of Border Radius of Image

Create an HTML <img> element and add src="logoimage.jpg" attribute to the image element to specify the relative URL of the image.

Add CSS inline style style="border:1px solid red;" to the image tag to add border to the image.

Add "border-radius: 50%" to the CSS inline style to add border radius to the image.

Here "border-radius" is the CSS property name and the value of the property is "50%".

Have a closer look at the following example:

Example of HTML Image Border Radius


Output of the above code example

Example of Image Border Radius in a Webpage


xFactor School Logo

In the above example, CSS inline style is used to set border radius to the image.

style="border: 1px solid red; border-radius: 50%;" is the css border style. Here the color of border line is red, line style is solid and width is 1px. The border radius is 50%.

Live Code Playground

In the following HTML code editor, you can practice the above code by changing the value of CSS border-radius property. Click on the 'Run Code' button to render the code; the rendered page will be displayed in the following HTML Code Output frame. Practice until you become comfortable and proficient with your code.

HTML logo HTML Online Editor
HTML Code Output