Adding image borders

Borders can be something that you can add to your image. Sometimes though, if you don't want borders, then you just use 0 as the value for the border. In the following example, there is a 5px border:

<img src="/demo.gif" border="5px" />

You can always change the border size to whatever size you want. You don't necessary have to place the px after the number, but it is good programming style to do so and it will also make the units clearer for future reference. To have no border (borderless, meaning a border of 0), you can input 0 as the value of border:

<img src="/demo.gif" border="0px" />

Bordercolor is a code that will allow you to to change the color of the border of the image (just like how its name says). It is very easy to change the border color, all you have to do is bordercolor="Color or hex code" (which ever color you want is placed in the quotations). Below is an example:

<img src="/demo.gif" border="5px" bordercolor="red" />

Though the bordercolor option is very convinent, not all browsers support it. So if the browser that you can currently viewing it with does not display a red border, then you know it does not support it. The browser that supports it is generally IE. But if you would like your border color to display in almost all browsers, you can use CSS to do the trick. Use the code below:

<img src="/demo.gif" border="5px" style="border-color:red;" / >

If you are using a hex code, just simply replace the color name with the hex code. You can also change the border size in CSS by using border-size:#ofpx; and also the style of the border with border-style:style;. A more simple way to include all of these is using the border:style #ofpx color; option. Below is an example.

<img scr="/demo.gif" style="border:solid 5px red;">

(Border style) Also, in the code above, you see the word solid in the code too, it just means that the line (border) will be solid. You can also use many other types of borders such as: dotted, dashed, solid, double, groove, ridge, inset, outset. Below are examples of each:

<img src="/demo.gif" style="border:dotted 5px red;" />

<img src="/demo.gif" style="border:dashed 5px red;" />

<img src="/demo.gif" style="border:solid 5px red;" />

<img src="/demo.gif" style="border:double 5px red;" />

<img src="/demo.gif" style="border:groove 5px red;" />

<img src="/demo.gif" style="border:ridge 5px red;" />

<img src="/demo.gif" style="border:inset 5px red;" />

<img src="/demo.gif" style="border:outset 5px red;" />

Copyright Brains That Work .
Theme by Pool theme design by Borja Fernandez. ^Top^