CSS rounded corners image

Next Page >>
HTML tutorial

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:

selector_name {
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

Example of rounded corners image

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:

Example (this is HTML - PHP editor, change text, values on this window)

<!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

 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" />
</body>

  </html>

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;

Example (this is HTML - PHP editor, change text on this window)

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

Example (this is HTML - PHP editor, change text on this window)

<!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>

  </head>

  <body>
<h2>How do I make circle and elipse</h2>

  <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

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

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

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

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