Css image with rounded corners

How To Create Rounded Images In HTML CSS (Simple Examples)

Welcome to a quick on how to create rounded images in HTML and CSS. So you have a website and want to display images in a circular format? Thankfully, it is easy to do so with modern CSS.

There are 2 quick ways to create rounded images in CSS.

1. For square images, simply add a 50% border radius.
3. For images that are rectangular, set it as the background image of a square then add the 50% border radius.
5. #demo < width: 200px; height: 200px; >
6. #demo

That about covers the essentials, but let us walk through some examples in this guide. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

CSS ROUNDED IMAGES

All right, let us now get into the examples of creating rounded images in HTML and CSS.

EXAMPLE 1) BASIC ROUNDED IMAGE

1A) THE HTML & CSS

 .roundimg  

Yep, it’s that simple. As some of you guys already know, we normally use border-radius to create rounded corners… So when we do a border-radius: 50% , it literally turns the container (or image) into a circle.

1B) MUST BE A SQUARE IMAGE!

Take extra note though – The 50% border radius trick will only work on square images . If we apply it to a rectangular image, it turns into an oval instead.

EXAMPLE 2) ROUNDED BACKGROUND IMAGE

2A) BASIC ROUNDED BACKGROUND IMAGE

 .roundedA   

To deal with rectangle and background images, we use the same strategy as above – But we apply it to a instead.

• width: 200px; height: 200px; border-radius: 50%; will turn the into a circular container.
• The image is then “added” using background-image: url(«zman.webp») .

2B) POSITIONING THE BACKGROUND IMAGE

As you may have also noticed – CSS will, by default, place the top left side of the image as the background. It will be “cut off” in an awkward manner if the image is off-centered. To fix that, we can manually reposition it using background-position , and also, resize it using background-size .

2C) MULTIPLE BACKGROUND IMAGES

Finally, what happens if we have to deal with multiple round images? As a small extra, I will recommend putting all the “basics” in a .rounded CSS class and manually specify the background-image in the inline style . Yep… This is kind of painful, but it’s better than manually editing every image.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

LINKS & REFERENCES

TUTORIAL VIDEO

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment Cancel Reply

Search

Breakthrough Javascript

Take pictures with the webcam, voice commands, video calls, GPS, NFC. Yes, all possible with Javascript — Check out Breakthrough Javascript!

Socials

About Me

W.S. Toh is a senior web developer and SEO practitioner with over 20 years of experience. Graduated from the University of London. When not secretly being an evil tech ninja, he enjoys photography and working on DIY projects.

Code Boxx participates in the eBay Partner Network, an affiliate program designed for sites to earn commission fees by linking to ebay.com. We also participate in affiliate programs with Bluehost, ShareASale, Clickbank, and other sites. We are compensated for referring traffic.

Источник

How TO — Rounded Images

Learn how to create rounded and circular images with CSS.

How To Create Rounded Images

Step 1) Add HTML:

Example

Step 2) Add CSS:

Use the border-radius property to add rounded corners to an image. 50% will make the image circular:

Example

Go to our CSS Images Tutorial to learn more about how to style images.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Rounded Corners on Images

The CSS property border-radius adds rounded corners on images. You can round all of the image’s corners or just select corners, vary the radius on different corners or display an image in the shape of an oval or a circle.

1. Add the image to your page.

2. Add a class to your image

This way, your styles will only target elements with that class.

Note: If you are using the grid system on your page, and you want your image to always take up the full width of the column that contains it, also add the class dcf-w-100%

3. Style your corners.

The border-radius CSS property is what adds the rounded corners.

img.rounded-corners < border-radius: 30px; > 

You can experiment with different values to get it the way you like.

border-radius: 5px ;

border-radius: 50px ;

border-radius: 75px ;

If you want it to be a circle, add border-radius: 50% ; . This will only make a circle if you are starting with a square image.

border-radius: 50% ;

border-radius: 50% ;

If you want different corners on your image to be rounded differently from each other, it’s possible to target them individually. In the previous examples, when you declare one value for border-radius, it applies that to all the corners. But you can list out four different values for the different corners.

1 2 3 4

The order of the numbers goes clockwise starting from the top left corner: top left, top right, bottom right, bottom left.

Here are some examples of images with border radius values that are different for different corners:

border-radius: 120px 20px 120px 20px ;

border-radius: 40px 40px 0 0 ;

border-radius: 0 50% 50% 50% ;

4. When you have the corners looking the way you want, add your styles to your site’s CSS

Inside of UNLcms, go to the Appearance section of your site and click «Settings.»

Paste your styles into the CSS box at the top, then scroll down to the bottom of the page and hit «Save Configuration».

The finished product

The HTML

The CSS

img.rounded-corners < border-radius: 30px; >

5.0 Update

With the update to 5.0, there are now utility classes for adding rounded corners built right into the framework! Check them out in the DCF documentation.

Источник

CSS Styling Images

Use the border-radius property to create rounded images:

Example

Example

Thumbnail Images

Use the border property to create thumbnail images.

Example

img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
>

Example

img <
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
>

img:hover box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
>

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Example

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Example

Polaroid Images / Cards

Example

div.polaroid <
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
>

div.container text-align: center;
padding: 10px 20px;
>

Transparent Image

The opacity property can take a value from 0.0 — 1.0. The lower value, the more transparent:

Example

Image Text

How to position text in an image:

Example

Image Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer or Edge 12.

Example

Change the color of all images to black and white (100% gray):

Tip: Go to our CSS filter Reference to learn more about CSS filters.

Image Hover Overlay

Create an overlay effect on hover:

Example

Example

Example

Example

Example

Example

Flip an Image

Move your mouse over the image:

Example

Responsive Image Gallery

CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

Example

.responsive <
padding: 0 6px;
float: left;
width: 24.99999%;
>

@media only screen and (max-width: 700px) .responsive width: 49.99999%;
margin: 6px 0;
>
>

@media only screen and (max-width: 500px) .responsive width: 100%;
>
>

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.

Image Modal (Advanced)

This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:

Example

// Get the modal
var modal = document.getElementById(‘myModal’);

// Get the image and insert it inside the modal — use its «alt» text as a caption
var img = document.getElementById(‘myImg’);
var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);
img.onclick = function() modal.style.display = «block»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
>

// Get the element that closes the modal
var span = document.getElementsByClassName(«close»)[0];

// When the user clicks on (x), close the modal
span.onclick = function() <
modal.style.display = «none»;
>

Источник