CSS rounded corners image
CSS Tutorial » CSS rounded corners image
How do I make rounded corners in CSS with an image?What is border-radius in CSS?
What is rounded corners in CSS?
To create a rounded corner image, we have to use CSS border-radius property. This property from the selector specified is used to set the border-radius of element.
Syntax:
border-radius: value;
}
/* In this case it sets border-radius value to all 4 corners */
Let's have an example and working on it: first picture has border-radius:50px and second picture has border-radius:50px


Browser Support CSS rounded corners
Element | ![]() Chrome |
![]() IE |
![]() Firefox |
![]() Opera |
![]() Safari |
Browser Support option | Yes | Yes | Yes | Yes | Yes |
CSS rounded corners image
How do you create rounded corners?
The create this we use CSS Style with a selector called my_picture_round_con and we add property border-radius: with value 50px for the first picturs and 70px for the second picture.
For a better understanding we present an example:
<!DOCTYPE html>
<html>
<head>
<title>css rounded corners image - example</title>
<style>
.my_picture_round_con1 {
border-radius:50px;
height: 160px;
width: 269px;
}
.my_picture_round_con2 {
border-radius:50px;
height: 160px;
width: 269px;
}
</style>
</head>
<body><h2>How do I make rounded corners in CSS with
</body>
an image</h2>
<img class="my_picture_round_con1"
src="https://www.agernic.com/templates/mariwel.jpg"
alt="news templates" />
<img class="my_picture_round_con2"
src="https://www.agernic.com/layout/best-responsive-layout.jpg"
alt="responsive layout" />
</html>
Related subjects:
CSS rounded coners
CSS rounded corners image
CSS rounded corners background image
Tags: css round image without stretching, rectangle image, background, curved border, shadow, css border image rounded coners, rounded coners to a picture, clip, mask, bootstrap
CSS rounded corners on one side
To make rounded coners for one side we must apply border radius as: top only border-radius: 10px 10px 0 0; bottom only border-radius: 0 0 15px 15px; left only border-radius: 10px 0 0 10px; right only border-radius: 0 10px 10px 0;
<!DOCTYPE html>
<html>
<head>
<title>css rounded corners image - example</title>
<style>
.my_picture_round_con_top {
border-radius:50px 30px 0 0;
height: 100px;
width: 200px;
}
.my_picture_round_con_bottom {
border-radius: 0 0 50px 30px;
height: 100px;
width: 200px;
}
.my_picture_round_con_left {
border-radius: 50px 0 0 30px;
height: 100px;
width: 200px;
}
.my_picture_round_con_right {
border-radius: 0 50px 30px 0;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<h2>How do I make rounded corners in CSS one side</h2>
<b>top side</b><br />
<img class="my_picture_round_con_top"
src="https://www.agernic.com/templates/mariwel.jpg"
alt="news templates" /><br /><br />
<b>bottom side</b><br />
<img class="my_picture_round_con_bottom"
src="https://www.agernic.com/layout/best-responsive-layout.jpg"
alt="responsive layout" /><br /><br />
<b>left side</b><br />
<img class="my_picture_round_con_left"
src="https://www.agernic.com/templates/mariwel.jpg"
alt="news templates" /><br /><br />
<b>right side</b><br />
<img class="my_picture_round_con_right"
src="https://www.agernic.com/layout/best-responsive-layout.jpg"
alt="responsive layout" /><br /><br />
</body>
</html>
CSS rounded corners circle
If you want to create a circle you may specify the value of border-radius in percentages as border-radius: 50%.
This is particularly useful when you need to create a circle or elipse shape of a picture, but it can be used at any time if it correlates with the width and height of the elements and must have the same value, ie be square.
<!DOCTYPE html>
<html>
<head>
<title>css rounded corners image - example</title>
<style>
.my_picture_round_con_top {
border-radius: 50%;
height: 100px;
width: 200px;
}
.my_picture_round_con_bottom {
border-radius: 50%;
height: 200px;
width: 200px;
}</style>
<h2>How do I make circle and elipse</h2>
</head>
<body>
<b>elipse</b><br />
<img class="my_picture_round_con_top"
src="https://www.agernic.com/templates/mariwel.jpg"
alt="news templates" /><br /><br />
<b>circle</b><br />
<img class="my_picture_round_con_bottom"
src="https://www.agernic.com/layout/best-responsive-layout.jpg"
alt="responsive layout" /><br /><br />
</body>
</html>
css rounded corners : image, button, div, generator, table, on one side, bottom only, top only, circle, not working
CSS rounded corners image - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

Find here examples of creative and unique website layouts.

Find here examples of creative and unique website CSS HTML menu.