borders

discussing :

borders

introduction;

in this tutorial, we're going to discuss borders for images. based on my research, there will 8 different types of borders you can use. the default for aff is solid.

border-width - the thickness of the border
border-style - the style of the border
color - color of border

in this tutorial, i didn't use color, but it's not something that hard to understand so i didn't feel the need to show it.

remove the spaces after every first bracket in each element ('<') to get the code to work properly. also make sure the the code is in one continuous line- not 3 broken lines.

solid;

the very first one is the ultimate basic border. it's very simple, but it's used very often. a solid border. solid borders are nothing fancy. they are, literally, a line surrounding your box.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/Par
kHyeMin2Banner_zpse9b20cff.png" style="width: 190px; height: 59px; border-style: solid; border-width: 1px;"/>

preview:

The border-width is set to 1px and that's as thin as the border can get. the border-style is solid. pretty self-explanatory as you can see. the border is just a solid line.

dotted;

the second one is dotted. again, it's pretty self-explanatory. it's a dotted line surrounding your image.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/Par
kSoraBanner_zps176c8904.png" style="width: 190px; height: 59px; border-style: dotted; border-width: 3px;"/>

preview:

i set the border-width to 3px in this one to show you the effect of border-width. the border-style is dotted and this is how it looks like.

dashed;

the third type of border i'm going to show you is dashed.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/Par
kHwanHuiBanner_zpsb4330d73.png" style="width: 190px; height: 59px; border-style: dashed; border-width: 1px; color: #d3d3d3;"/>

preview:

I changed the color in this one to show you how it would look like to use color. anyway, this is how dashed would look like.

double;

the fourth type of border i will be showing is double.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/Par
kHyeMinBanner_zps6972a47c.png" style="width: 190px; height: 59px; border-style: double; border-width: 3px;"/>

preview:

when using the double border, the border-width must be set to 3px or larger, 3px being the least (obviously). if you go any lower, you will not see the double borders.

groove;

the fifth type of border i'm going to show is groove.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/Bae
kSuMinBanner_zps1d4f8677.png" style="width: 190px; height: 59px; border-style: groove; border-width: 3px;"/>

preview:

for this border, i reccomend having the border-width to 3px or more. that's when you start to see the effects of groove. you can only notice a little bit if it's any lower.

ridge;

the sixth type of border is ridge.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/DoH
weJiBanner_zps7d5621e2.png" style="width: 190px; height: 59px; border-style: ridge; border-width: 3px;"/>

preview:

again, i recommend 3px or higher for this. any lower and you won't see the effects of ride that well.

inset;

the seventh type of border is inset.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/Kim
SeukHyeBanner_zpsacb48443.png" style="width: 190px; height: 59px; border-style: inset; border-width: 1px;"/>

preview:

for this border style, any border-width size is okay.

outset;

the last type of border i'll be shoing is outset.

code:
< img src="http://i1307.photobucket.com/alb
ums/s587/MagicalDreams1/Banners/Bye
onSeoEunBanner_zpsc43534f5.png" style="width: 190px; height: 59px; border-style: outset; border-width: 1px;"/>

preview: