Create rounded image in HTML CSS
How to » Create rounded image corners
Study in this chapter:
1. - How can I create rounded image corners HTML CSS?
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Example:
Make rounded image / picture / photo with border
Rounded image with Border - CSS HTML
To create a Rounded image we add a class .image-border {border-radius: 50%; border: 3px solid #999; margin-top: 20px; width: 70%;} add border-radius: 50%
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rounded image with Border</title>
<style>
.image-border {
border: 3px solid #999;
margin-top: 20px;
width: 70%;
border-radius: 50%;
}
div {
margin-right: auto;
margin-left: auto;
width: 80%;}
</style>
</head><body>
<h3>Round image with Border</h3>
<div>
<img class="image-border" src="https://www.agernic.com/uploads/nice-france.jpg" alt="Nice France"/>
<img class="image-border" src="https://www.agernic.com/uploads/mountains.jpg" alt="picture mountain"/>
</div>
</body>
</html>
Related subjects:
create search bar using CSS HTML
Shrink Navigation Menu on Scroll
Add border around image
Create round image with white border around picture
To create round picture with Border around this we add a class .image-border {border-radius: 50%; border: 3px solid #FFF; margin-top: 20px; width: 70%;} - border-radius: 50%;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create round image with white border around picture<</title>
<style>
body {
background-color: #006;
}
h3 {
color: #FFF;
}
.image-border {
border: 3px solid #FFF;
width: 70%;
margin: 20px;
border-radius: 50%;
}
div {
margin-right: auto;
margin-left: auto;
width: 80%;}
</style>
</head><body>
<h3>Create round image with white border picture / image / photo</h3>
<div>
<img class="image-border" src="https://www.agernic.com/uploads/nice-france.jpg" alt="Nice France"/>
<img class="image-border" src="https://www.agernic.com/uploads/mountains.jpg" alt="picture mountain"/>
</div>
</body>
</html>
Tags: border around rounded image /picture / photo css html, image border color in html, css image border styles - white border
how to put a border around an image
How do I round the corners of an image in CSS? make an image perfectly round in CSS?
Border color in HTML CSS
Use the border property to add a border to an <img> element and for any color change: border: 3px solid #color-name; replace color-name with any color you need.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create white border around a picture</title>
<style>
body {
background-color: #E6E6E6;
}
h3 {
color: #060;
}
.image-border {
border: 3px solid #F00;
width: 70%;
margin: 20px;
}
.image-border2 {
border: 3px solid #00F;
width: 70%;
margin: 20px;
}
div {
margin-right: auto;
margin-left: auto;
width: 80%;}
</style>
</head><body>
<h3>Create white border around a picture / image / photo</h3>
<div>
<img class="image-border" src="https://www.agernic.com/uploads/nice-france.jpg" alt="Nice France"/>
<img class="image-border2" src="https://www.agernic.com/uploads/mountains.jpg" alt="picture mountain"/>
</div>
</body>
</html>
Summary of description
border around rounded image /picture / photo css html, image border color in html, css image border styles - white border how to put a border around an image
How do I round the corners of an image in CSS? make an image perfectly round in CSS?
Create rounded image in HTML CSS - how to
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.