HTML Image Border
HTML Tutorial » HTML Image Border
We can improve a web page by adding images to it, but often we want to add borders with different situations as: color, radius, shadow, width, hight.
We can add Image Border in different ways as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file as style.css
Syntax:
<img src="url" style="border:style width color;">
Note: Best way, use external CSS
HTML Image Border color, width, right - examples
Example:
Example 1 HTML Image Border: color, width, right - example
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Border color - example</title>
</head>
<body>
<h1>We add Image Border color - example</h1>
<img style="border:2px solid green;" src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="landscape beach" />
<h2>HTML Image Border width - example</h2>
<img style="border:2px solid green; width:200px" src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="landscape beach" />
<h3>HTML Image Border right - example</h3>
<img style="width:300px; border-right-width: 5px; border-right-style: solid; border-right-color: green;"
src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="landscape beach" />
</body>
</html>
Note: Image Border radius it is not working for inline style, use internal or external CSS instead.
HTML Image Border radius circle - examples
To get circular image o picture, you have to use the border-radius property, add rounded corners to an image. 50%
Example:
add rounded corners to an image. 50%
to get circular image- examples:
to get circular image- examples:
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Border radius circle - examples</title>
</head> <style>
.img1 {
border-radius: 50%;
}
.img2 {
border-radius: 10%;
}
</style>
<body>
<h1>We add Image Border radius circle - example</h1>
<img class="img1" src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="landscape beach" />
<h2>HTML Image Border radius 10% - example</h2>
<img class="img2" src="https://www.agernic.com/uploads/landscape_beach.jpg" alt="landscape beach" />
</body>
</html>
html image border color - code, tag, change, attribute, style, css, shadow, html image margin right html img margin left right.
HTML Image Border - html tutorial
Online Editor
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.