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:

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:

<!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

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

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.