HOME | PHP Tutorial | CSS
facebook icon
AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP
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


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

2649. Hexcolors : Hexadecimal RGB - HTML Tutorial
HTML hexcolors - HTML tutorial
http://www.echoecho.com/htmlhexcolors03.htm

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
https://tutorialehtml.com/en/html-tutorial-complete-html-guide/

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
http://www.agernic.com/html-tutorial.html

2127. HTML Tutorial - Entities / HTML symbols
Forming secial caracters
https://tutorialehtml.com/en/html-tutorial-entities-html-symbols/

2673. Links : Link to New Window - HTML Tutorial
HTML links - HTML tutorial
http://www.echoecho.com/htmllinks10.htm

2641. Frames : Borders - HTML Tutorial
HTML frames - HTML tutorial
http://www.echoecho.com/htmlframes04.htm

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