Julie Spackman's CIT260 Presentation

Borders

The Border Property

The CSS border properties let you change the style, width, and color of element borders.
With these properties, you can:

• Put borders on all sides of an element.
• Put borders on specific sides of elements.
• Create a single or double border.
• Create dashed or dotted borders.
• Create some cool pre-styled borders.
• Use images to make custom borders.
• Eliminate borders.
• Troubleshoot!

The most commonly used border code is probably the shorthand code, where you can specify the type, color, and thickness of the border on all four sides all at once, like this: border: solid olive 3px;

But let's slow down a little bit.

You can do the same thing on each side, like this:

border-top: solid olive 10px;
width: 700px;

border-left: solid olive 50px;
width: 650px;

border-right: solid olive 100px;
width: 700px;

border-bottom: solid olive 30px;
width: 700px;

I included the codes for widths above, because if you recall from the css box model, adding borders adds to your overall element size.

By now you've noticed you can adjust the thickness of your single border.

You can also create double borders like this:

border-style: double;
border-width: 10px;
border-color: olive;
width: 680px;

Or just use the shorthand:

border: double olive 30px;
width: 640px;

You can create dashed and dotted borders:

border: dashed olive 10px;
width: 680px;

border: dotted olive 10px;
width: 680px;

Some preset border styles also include "groove", "ridge", "inset", and "outset".
These will automatically be styled with grey, but you can add a color!

border: groove 10px;
width: 680px;

border: groove 10px olive;
width: 680px;

border: ridge 10px olive;
width: 680px;

border: inset 10px olive;
width: 680px;

border: outset 10px olive;
width: 680px;

You can even mix it up. Remember Clockwise from the top!

border-color: olive blue grey teal;
border-width: 10px 5px 20px 15px;
border-style: dotted dashed groove double;

Just like the corners, you can simplify by just using three, two, or of course one value.

border-style: dotted solid double;
border-color: olive teal grey;
border-width: 10px;

Or

border-style: dotted solid;
border-color: olive teal;
border-width: 10px;

And we've already seen this.
And you can add the values in any order.

border: 10px olive solid;
border: solid 10px olive;
border: olive solid 10px;

It is important to note that of the border shorthand property,
the only one required is the style.
The default thickness will be "medium", which is 3px.
The default color will be the text color.

border: solid;

More Borders

The Border Image Property

If I have an image, maybe like this one:

I can do all kinds of neat tricks using the border-image property.

Like just a bit in the corners: border: 10px solid transparent;
border-image: url(frame.png) 50% round;

Or an alternating frame: border: 10px solid transparent;
border-image: url(frame.png) 20% round;

Or one color in the corners and the other on the sides: border: 10px solid transparent;
border-image: url(frame.png) 30% round;

Or one color in the corners and the other stretchedon the sides: border: 10px solid transparent;
border-image: url(frame.png) 30% stretch;

Or if you don't have an image, you could also just use a gradient! color: teal;
border: 10px solid teal; border-image: repeating-linear-gradient( 45deg, teal, olive 1%, olive 1%, teal 8%) 10;

Even More Borders

Eliminating Borders

Sometimes, you'll get an element or embed a map or video that already has a border applied by default. It is useful to know how to get rid of that border.

You can style buttons (or other elements) to change anything, including eliminating the border.

Or

Or even

If you are working with tables, the border-collapse property is handy.
Otherwise, your default table looks like this:

If you use border-collapse: collapse, then it'll look a lot better!
(*the default is "separate")

The most useful Borders

Troubleshooting with Borders

Borders are really useful.

They always work, and if they don't, then you know you're doing something really wrong.

If you are working with layouts, it's really handy to add borders on things so you can see what you are working with.

I use this method constantly when working on pages, whether it is the navigation, footer, or main content.

What if I'm trying to make things align horizontally with even spacing? It is easier to do if I can see where the blocks end.

Like this:

Like now, I can see that I need some padding.

You get the idea! This can be as involved as you need, and then when you are done, you simply delete the borders. Voila!