CSS in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Image borders with css

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

Applying the CSS border to a web studio image

BORDERS & WEB STUDIO
Borders use older CSS but there is still a lot we can do with it. CSS3 offers more though.
We'll apply them to the image and use inline css. I'll show you some other options below.
Even the IE browsers can see borders so when use Web studio preview you'll see them

You put your image on the page like you always do, select the border you want to use from the examples below then...

Copy/paste the style to "Inside Object" like this

Select your image and on the
HTML tab in "Insert Object HTML"
copy/paste the style to
"Inside Object"

Preview to see it working

Change the color

style="border:2px solid black;"

style="border:2px solid white;"

style="border:2px solid #ffbf28;"

style="border:4px solid #ffbf28;"

Change the size

Solid Borders

Use any html color name or hex color

Use px for the border size

double

style="border:6px double white;"

style="border:2px dashed white;"

style="border:4px inset gray;"

style="border:4px outset gray;"

Border Styles

With double I suggest a min 6px

There are more border styles you can search for

dashed

inset

outset

Inset and outset are about their colors

padding

style="border:2px solid black;
padding: 3px;
background: white;"

style="border:2px solid black;
padding: 5px;
background: gray;"

style="padding: 4px 4px 16px 4px;
background: white;"

style="border:1px solid black;
padding: 4px 4px 16px 4px;
background: white;"

Borders with Padding

With padding you also
add a background color

padding size & color

polaroid padding

polaroid with border

Change the size 5px
and color
gray

You can also add
padding: top right bottom left;
px sizes

Or use polaroid padding
with a
border

Applying the CSS border to multiple web studio images

BORDERS & WEB STUDIO
If you want one of the border styles we learned above and use it for multiple images.
We'll apply them to the image using internal css. Then use a class to apply the style.
We use this method to apply a border on a link hover as well, I'll show you that below.

You put your image on the page like you always do, select the border you want to use from the examples above then...

Copy/paste the class to "Inside Object" like this

Select your image and on the HTML tab in "Insert Object HTML" select
"Inside Object" and copy/paste this

class="myborder"

On the HTML tab in
"Insert Page HTML" copy/paste this
"Inside HEAD"

<style type="text/css">
.myborder{
border:2px solid white; }
</style>

Put the border code into a style tag from the examples above like this then put that style into the HEAD...

See how we removed the inline style and put in in an internal style tag for the HEAD?

Copy/paste the style into a style tag "Inside HEAD" like this

class="myborder"

<style type="text/css">
.myborder{
border:2px solid white; }
</style>

inside object

inside HEAD

class="myborder2"

<style type="text/css">
.myborder2{
border:2px solid black;
padding: 3px;
background: white;
}
</style>

inside object

inside HEAD

Now all the images with the class="myborder" or class="myborder2" in it will use the same style

Applying the CSS border to web studio image links

BORDERS & WEB STUDIO LINKS
We use internal css with a class inside the link instead of in the image this time.
You can read over the steps above to change the style of the borders

You put your image on the page like you always do, use "Other Link" to put the class in the image link

Copy/paste the class to "Other Link" like this

Select your image and
on the Insert tab
in "Links" select
"Other Link"

The default is the "Links" button and "Enter URL"
That's where you put your link and the class

Put in a website link or a page link like this

your_page.html

web studio adds an underscore if there is a space in the page name

Paste the class to the end of the link

your_page.html" class="hoverborder-out

On the HTML tab in
"Insert Page HTML" copy/paste to
"Inside HEAD"

Copy/paste the code to "Inside HEAD" like this

Add an "outside" Link Border

Outside border on Hover

" class="hoverborder

end of link

<style type="text/css">
a.hoverborder img,a.hoverborder:link{
border: none;
float: left;}
a.hoverborder:hover{
border: 2px solid goldenrod;
margin:-2px;}
</style>

inside HEAD

A 2px border
uses a matching
-2px margin

That adds a border to the outside of the image for ones that have the space

Add an "inside" Link Border

" class="hoverborder-in

end of link

<style type="text/css">
a.hoverborder-in img,a.hoverborder-in:link{
border: none;
overflow: hidden;
float: left;}
a.hoverborder-in:hover{
border: 2px solid goldenrod; }
a.hoverborder-in:hover img{
margin: -2px; }
</style>

inside HEAD

A 2px border
uses a matching
-2px margin

Inside border on Hover

That adds a border to the inside of the image for ones close

Change a Link Border Color

Change border on Hover

" class="changeborder

end of link

<style type="text/css">
a.changeborder img,a.changeborder:link,a.changeborder:visited {
float: left;
border: solid 1px goldenrod;}
a.changeborder img {border:none;}
a.changeborder:hover{
border: solid 1px silver;}
</style>

inside HEAD

A 1px border
changing from
goldenrod to
silver

That adds a border to the outside of the images

Change a Link Border Color and Add CSS3 Box-Shadow

Change border on Hover

" class="shadowborder

end of link

<style type="text/css">
a.shadowborder img,a.shadowborder:link,a.shadowborder:visited {
float: left;
border: solid 1px goldenrod;}
a.shadowborder img {border:none;}
a.shadowborder:hover{
border: solid 1px silver;
-webkit-box-shadow: 0 0 12px white;
box-shadow: 0 0 12px white;}
</style>

inside HEAD

A 1px border
changing from
goldenrod to silver
and a white shadow

That adds a border and a css3 box-shadow for a glow effect
IE9 up and all normal browsers older IE just shows the border change

Thank-you

CSS in Web Studio 5 - CSS image borders - by Web Studio Next

aaaaaaaaaaaaiii