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
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%.