HOME | PHP Tutorial | CSS
facebook icon
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

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

<img src="url" style="border:style width color;">
Note: Best way, use external CSS

HTML Image Border color, width, right - examples

Example 1 HTML Image Border: color, width, right - example

<!DOCTYPE html>
<title>HTML Image Border color - example</title>
<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" />
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>
<title>HTML Image Border radius circle - examples</title>
</head> <style>
.img1 {
border-radius: 50%;
.img2 {
border-radius: 10%;
<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" />


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

2649. Hexcolors : Hexadecimal RGB - HTML Tutorial
HTML hexcolors - HTML tutorial

2119. HTML Tutorial - Full HTML Tutorial
HTML complete tutorial. Full HTML tutorial so you can learn how to code and to create your own web site

1927. HTML code, Tags, Example, CSS, Editor, Online Courses, Training
Online HTML Tutorial pdf, what is HTML, Online Courses, Classes, Training, Tutorials for Beginners - agernic.com is a free interactive Code, Tags, Example, CSS, Editor, Online Courses, Training for beginners

2127. HTML Tutorial - Entities / HTML symbols
Forming secial caracters

2673. Links : Link to New Window - HTML Tutorial
HTML links - HTML tutorial

2641. Frames : Borders - HTML Tutorial
HTML frames - HTML tutorial

Your add here
PHP rtrim() function

PHP htmlspecialchars() function

PHP strip_tags() function

PHP trim() function

PHP str_repeat() function

PHP strrchr() Function

PHP print() function

PHP similar_text() function

PHP strlen() function

PHP htmlentities() function

PHP strstr() function

PHP strtoupper() function

PHP lcfirst() function

PHP htmlspecialchars_decode() function

PHP count() Function

PHP define() function

PHP Function, Creating PHP Function - how? - example
SQL IN Operator - example
Travel & Turism
CSS align image center - how to create
HTML Table Rowspan and Colspan
Design HTML CSS Templates