AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

CSS rounded corners image


<< Previous Page
HTML tutorial
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
news templates responsive layout

Browser Support CSS rounded corners

Element chrome browser
 Chrome
ie browser
 IE
firefox browser
 Firefox
opera browser
 Opera
safari browser
 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>

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;

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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


CSS Scrollbar Horizontal
CSS Scrollbar in Div
CSS Scrollbar Firefox
CSS Style Scrollbar
CSS Style Text
CSS background color
CSS Div Id Class
CSS Text Wrap
CSS text-align
CSS Text Decoration
CSS Text Shadow
CSS Text Color
CSS Text Bold
CSS Text Size
CSS background image full
CSS background opacity
CSS border radius
CSS rounded corners
CSS font color
CSS Class & ID
CSS align image center
CSS align content
CSS link color
CSS Text Style
CSS Text Font Size
CSS max width &height
CSS width and height
CSS Margin
CSS Padding
CSS Border Style
CSS background
CSS in HTML
Basic Syntax of CSS
CSS Introduction
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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Create a Sticky Navbar with and without ...
CSS Grid Layout. Examples of grid-gap, l...
CSS animation examples: delay, rotate, s...
CSS font weight bold, thin, values, semi...
CSS background color - opacity, gradient...
CSS flex - display: flex - CSS Flexbox L...
CSS border padding...
HTML text center horizontally and vertic...
HTML text input <input type="text"&g...
HTML link color...
How to Link CSS to HTML, external file n...
HTML link - hyperlink...
jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...