How Img Border HTML Code Gave Way To CSS: A Simple Tutorial

Attribute of

HTML Tags Guide To Adding Images To Your Web Documents

What does How Img Border HTML Code Gave Way To CSS: A Simple Tutorial do?

Previously used to define a border on an image element. It has been deprecated and should no longer be used.

The Old Way to Add a Border to an Image

The border attribute was previously used to add a border to an <img> element.

<!-- Do not do this. This is feature deprecated and may not work in all browsers. -->  <img src="/wp-content/uploads/flamingo.jpg" border="25"> 

This way of adding a border is deprecated in HTML5.

The Right Way to Add a Border to an Image

The right way to add a border to an image (or anything else) is to use CSS. The CSS specification provides three different border properties: border-width, border-style, and border-color.

.border {   border-width: 25px;   border-color: red;   border-style: solid; } 

<img src="/wp-content/uploads/flamingo.jpg" class="border"> 

#border-1 .border { border-width: 25px; border-color: red; border-style: solid; }

Border Styles

There are several options for border-style.

.small {  max-width: 300px;  margin: 0 15px 15px 0; }  .border {   border-width: 15px;   border-color: red; }  .dotted {   border-style: dotted; }  .dashed {   border-style: dashed; }  .solid {   border-style: solid; }  .double {   border-style: double; }  .groove {   border-style: groove; }  .ridge {   border-style: ridge; }  .inset {   border-style: inset; }  .outset {   border-style: outset; } 

<img src="/wp-content/uploads/flamingo.jpg" class="small border dotted">  <img src="/wp-content/uploads/flamingo.jpg" class="small border dashed">  <img src="/wp-content/uploads/flamingo.jpg" class="small border solid">  <img src="/wp-content/uploads/flamingo.jpg" class="small border double">  <img src="/wp-content/uploads/flamingo.jpg" class="small border groove">  <img src="/wp-content/uploads/flamingo.jpg" class="small border ridge">  <img src="/wp-content/uploads/flamingo.jpg" class="small border inset">  <img src="/wp-content/uploads/flamingo.jpg" class="small border outset"> 

#border-2 .small { max-width: 300px; margin: 0 15px 15px 0; } #border-2 .border { border-width: 15px; border-color: red; } #border-2 .dotted { border-style: dotted; } #border-2 .dashed { border-style: dashed; } #border-2 .solid { border-style: solid; } #border-2 .double { border-style: double; } #border-2 .groove { border-style: groove; } #border-2 .ridge { border-style: ridge; } #border-2 .inset { border-style: inset; } #border-2 .outset { border-style: outset; }

Mix and Match Border Styles

You can use different border styles for each side of an image.

.border {   border-width: 15px;   border-color: red; }  .mixed {   border-style: solid dashed dotted double; }  

<img src="/wp-content/uploads/flamingo.jpg" class="border mixed"> 

#border-3 .border { border-width: 15px; border-color: red; } #border-3 .mixed { border-style: solid dashed dotted double; }

Border Shorthand

If you aren’t doing anything too particular or weird, you can combine the three different border rules into the single border property`.

.border {  border: 15px solid red; } 

<img src="/wp-content/uploads/flamingo.jpg" class="border"> 

#border-4 .border { border: 15px solid red; }

Border Placement and the Box Model

Borders appear inside the margins specified on an element, but outside the padding.

#green-box {  background-color: green;  margin: 0;  padding: 0; }  #border-padding-margin{  margin: 20px;  border: 20px solid red;  padding: 20px;  background-color: yellow; } 

<div id="green-box"> <img src="/wp-content/uploads/flamingo.jpg" id="border-padding-margin"> </div> 

#border-box-demo #green-box { background-color: green; margin: 0; padding: 0; } #border-box-demo #border-padding-margin{ margin: 20px; border: 20px solid red; padding: 20px; background-color: yellow; }

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.