Add border around image
How to » Add border around image
Study in this chapter:
1. - How can I create border around image 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:
Border Around Image / picture / photo
Border around Image CSS HTML
To create a Border around Image we add a class .image-border { border: 3px solid #999; margin-top: 20px; width: 70%;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border around image</title>
<style>
.image-border {
border: 3px solid #999;
margin-top: 20px;
width: 70%;
}
div {
margin-right: auto;
margin-left: auto;
width: 80%;}
</style>
</head><body>
<h3>border around image</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
Create a Sticky Navbar
Create white border around a picture / image
To create a whitw Border around Image we add a class .image-border { border: 3px solid #FFF; margin-top: 20px; width: 70%;} - color to border #FFF
<!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: #006;
}
h3 {
color: #FFF;
}
.image-border {
border: 3px solid #FFF;
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-border" src="https://www.agernic.com/uploads/mountains.jpg" alt="picture mountain"/>
</div>
</body>
</html>
Tags: border around 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 put a border around a picture / image CSS HTML?
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 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 put a border around a picture / image CSS HTML?
Add border around image - 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.