Image Borders

[Malkavian]

Hey everyone!

I know how to pad the edge of images and how to float them to the right or left of text, but how do you add a coloured border to an image?

Thanks in advance!

[Amaris]

I don't think you can with coding, but if you ever need to send me something for a border, I can do that!

[Malkavian]

Thank you! I'll PM now.

[Endorphin]

I had a play around with the BBCode and also with some CSS and couldn't see a way to add borders or border-like style effects to images or tables containing images - without some kind of mod being installed on the server.

Looks like Amaris might have the best option for you.

[Malkavian]

All sorted. Thanks, all!

[Al Terego]

I don't think you can with coding

Hold my beer, Ama

[Amaris]

You made a border with images, not using any kind of border code or something. :) That is very cool.

[Al Terego]

You made a border with images, not using any kind of border code or something. :)

The BBCode on this site is limited but you can make interesting effects with a bit of hacking.

Here's an explanation and a guide:

First, go to the Solid Backgrounds and search for a colour.   Once you find one you like, right click on it and select "copy image location", then paste it somewhere to be used as a border.  For example, the one that I used was Safety Orange Blaze (remember kids, Safety is important!)

Now, find the image and do the same.  It is best to find the image of the right size without specifying the height/width dimensions in BBCode, since a click on the resized image will display it in it's normal size which will mess up the borders.  To find the dimensions of the image, right click on it and choose "inspect".

Now you need to do a little arithmetic and lay the images out like this:
1. As the top border, the solid colour, resized to the desired border width by the image width plus twice the border width.  So for a 150Wx200H avatar, and a 10 pixels wide border, you would choose height=10 and width =180
2. On the next line beneath it, the solid colour resized to the desired border width by the image height (height=200 and width =10) as the left border
3. To the right of it, the image
4. To the right of it, the same solid colour as the left border in #2, to act as the right border
5. On the next line beneath it, the same solid colour as the top border in #1, to act as the bottom border

All of it together:

Code Select Expand

[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img][img]https://elliquiy.com/avatars/avatar_66170_1610681780.gif[/img][img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]


You can even go completely bonkers if you want to, by using blinkenlights instead of solid images, adding some [float=left] and [float=right] tags,  and wrapping it all in a [table]:


Like this:

Code Select Expand


[table][tr][td]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[float=left][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/float]
[float=right][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/float]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[float=left][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/float]
[float=right][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/float]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img][img]https://elliquiy.com/avatars/avatar_62435_1611807943.png[/img][img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[/td][/tr][/table]


That is very cool.

Thanks!  Can I have my beer back now?

[Malkavian]

Wow, thanks! :D

[Amaris]

Nope. It's mine now ;)

Yea I understood how you did it! But there is no bordering code specifically. I did already help her with borders via photoshop. Very cool tricks!

[Al Terego]

Nope. It's mine now ;)

Careful Ama, if you claim unfamiliar liquids, you might end up like Alice.

[Endorphin]

The BBCode on this site is limited but you can make interesting effects with a bit of hacking.

Here's an explanation and a guide:

First, go to the Solid Backgrounds and search for a colour.   Once you find one you like, right click on it and select "copy image location", then paste it somewhere to be used as a border.  For example, the one that I used was Safety Orange Blaze (remember kids, Safety is important!)

Now, find the image and do the same.  It is best to find the image of the right size without specifying the height/width dimensions in BBCode, since a click on the resized image will display it in it's normal size which will mess up the borders.  To find the dimensions of the image, right click on it and choose "inspect".

Now you need to do a little arithmetic and lay the images out like this:
1. As the top border, the solid colour, resized to the desired border width by the image width plus twice the border width.  So for a 150Wx200H avatar, and a 10 pixels wide border, you would choose height=10 and width =180
2. On the next line beneath it, the solid colour resized to the desired border width by the image height (height=200 and width =10) as the left border
3. To the right of it, the image
4. To the right of it, the same solid colour as the left border in #2, to act as the right border
5. On the next line beneath it, the same solid colour as the top border in #1, to act as the bottom border

All of it together:

Code Select Expand

[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img][img]https://elliquiy.com/avatars/avatar_66170_1610681780.gif[/img][img height=200 width=10]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]
[img height=10 width=170]https://www.solidbackgrounds.com/images/125x125/125x125-safety-orange-blaze-orange-solid-color-background.jpg[/img]


You can even go completely bonkers if you want to, by using blinkenlights instead of solid images, adding some [float=left] and [float=right] tags,  and wrapping it all in a [table]:


Like this:

Code Select Expand


[table][tr][td]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[float=left][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/float]
[float=right][img height=240 width=10]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img][/float]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[float=left][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/float]
[float=right][img height=220 width=10]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img][/float]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img][img]https://elliquiy.com/avatars/avatar_62435_1611807943.png[/img][img height=200 width=10]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=170]https://64.media.tumblr.com/25d4135a88a92eefb8d1bee90f2a9bad/tumblr_oi4kmg8DBm1u3ji4yo1_500.gif[/img]
[img height=10 width=190]https://64.media.tumblr.com/b12382a54860c9b59575b2819caa4931/tumblr_oi4kozOW5q1u3ji4yo1_500.gif[/img]
[img height=10 width=210]https://64.media.tumblr.com/3e2683f87309b4ed821eaebf337c1ee0/tumblr_oi4kn52eZU1u3ji4yo1_500.gif[/img]
[/td][/tr][/table]



Thanks!  Can I have my beer back now?

Nice workaround Al.

[Al Terego]

Nice workaround Al.

Not sure it was worth having my beer stolen.

[Endorphin]

Some people... no respect! :P

[Amaris]

It was given to me. :P

[Al Terego]

Anyway, old-school tinkering can be fun, check Steffy's Magic Shop for more BBCode fun