---

Greased 1.16.1 - Borders Appendix

November 20th, 2015

In issue #16 we briefly discussed how to use borders to accentuate nearly any part of a document, be it a paragraph, image, list, or arbitrary div. You can put a border around almost anything that uses an HTML tag, even inline elements like <em> and <strong> (these tags italicize and embolden text, respectively). Of course this isn't something you'll want to overuse, but it can be helpful in offsetting certain aspects of a review or to draw attention to a particular piece of information.

Remember that to use these HTML tips and tricks you must be in the Text editor of WordPress. When on the screen used to write or edit your review, you should notice 2 tabs in the upper right of the editing box. By default, you'll be using the Visual editor. By clicking on "Text," you'll be able to edit (most of) the raw HTML of your document. However, it's easy to mess things up here so be very careful and keep the following in mind:

1. Before starting, save your work!
2. Use Preview to see the effect of your changes.
3. Don't mess with anything other than what's instructed (unless you know what you're doing!)
4. Work in small increments, saving your work when successful.

There's also the W3C Try-It Editor, a quick and easy tool you can use in your browser that's perfect for testing something like borders.

Unlike some of these guides, I'm not going to be showing you how to put borders around anything in particular, only how to use borders in general. I will provide some common examples of where they can be used, however. Most of the time you'll be modifying existing HTML within the document rather than purely adding new material. I'll try to make this as simple as possible since I think borders can be a useful tool, but if you have any questions or if anything is unclear, ask me first!

---

An Introduction

There are a few different ways to "code" borders, and the method you use will depend largely on how you want your borders to look. The HTML term border is actually fairly restrictive, but with CSS as the standard when it comes to web-design, it takes on a whole new meaning. We can actually think of the CSS term border as being several individual properties wrapped up into a single property, which can then be divided up into different properties depending on the intended usage.

First of all, we can simply define border which will define border properties for all 4 sides (top, bottom, left, and right) as well as the appearance of the border (border-style, border-width, and border-color). This is the preferred method when you wish to style all 4 sides identically, which should be sufficient for most applications.

You can also define each of these properties individually by using border-style, border-width, and border-color individually. It will accomplish the same as the above, though it may be easier to work with each of the 3 properties individually before moving on to the shorthand method described above. It will also be necessary to understand this method if you wish to set different stylings for any of the 4 sides of the border.

Next we can define each side of the border individually with the tags border-top, border-bottom, border-left, border-right. When used alone, they can define all 3 properties (width, style, and color) just as the normal border, only this time these values will only apply to whichever side of the border is specified.

Finally, in some situations in may be prudent to combine the sides with individual stylings. In this case we'd use properties such as border-right-style or border-top-width. Circumstances like these probably won't arise often, though you may occasionally get into complicated stylings when using tables or trying to design a larger decorative element. For accentuating content in reviews though, it is very probable that you'll never need more than the simple shorthand (border) first described.

Until we start looking at some actual examples of where to use borders, I'm going to be applying them to simple divs, which are essentially boxes that I'm going to create for no other purpose than to display a border. First we'll learn how to style a border, then we'll learn how and where to apply that knowledge; however, those of you who've followed previous guides and/or understand how to use inline CSS with quickly be able to put these to use.

---

Shorthand Usage - Most Common

The easiest and most common way to style borders is with the border property. For this property to work properly, it needs to be followed by 3 separate values. These values will define border-width, border-style, and border-color in that order. Let's look at an example: let's make a border that's 5 pixels thick, done in the "groove" style (I'll go over the different styles shortly), and in the color #800080 (purple, more or less). We would code this as style="border: 5px groove #800080;" within whatever tag we were working with (such as <p style="border: 5px groove #800080;"> or <ul style="border: 5px groove #800080;"> - more on where to use them later).

And that's it! Making a border is that easy. All you've got to do is decide the thickness, the style, and the color. Let's look at a couple of others just for the hell of it. Here's one with a thickness of 20px, in the "outset" style, and colored #ffa500 (orange). For this we'll use style="border: 20px outset #ffa500;".

Let's do one more. How about a 3px border, "dotted" style, in #0000ff (blue). The inline CSS will look like style="border: 3px dotted #0000ff;".

Pretty easy, right? That's probably everything you'll need to know to add a basic border to whatever element you may wish to draw attention to in your document. Below is the list of styles one can use with corresponding examples. Note that the thinner the border, the less obvious some of the styles will be; because of this, I've made some of these borders relatively thick (10px). Other styles will be perfectly clear at smaller widths. Also note that for the style "double," 2 solid borders are used. When defining the width, you're defining the entire width of both borders plus the space in between. So if you specify a "double" border 5px in width, the width of both borders plus the space in between will add up to 5px; 5px does not refer to the width of each border. Specifically, the width is divided equally between each border and the gap. A 30px "double" border will contain an innermost border 10px thick, followed by a 10px wide gap, then another border, 10px wide.

---

Defining Each Property Individually

Sometimes it may be advantageous to define each border property separately. I can't think of any occasions where this would be better suited off-hand, but it is good information to know. Earlier I mentioned that border was shorthand for border-width, border-style, and border-color.

Let's take an earlier example: style="border: 3px dotted #0000ff;". Remember that this tells us that we want a border 3px thick, in the "dotted" style, color #0000ff (blue). Alternatively we can define this (with inline CSS) as style="border-width: 3px; border-style: dotted; border-color: #0000ff;". Nothing much to it, right?

Unlike the shorthad method, we can also use the individual terms to define the separate parts of a border, although you may want to opt to use the next method to do the same. Before we get going, I should point out that if you're going to use one of these properties, you must use all three. For instance, you can't just define border-width, you'll need to also define border-style and border-color.

Each property can support 1, 2, 3, or 4 values. Depending on how many values are used, different sides of the border will be affected in different ways. For the purposes of this demonstration, I'm only going to be playing around with border-color since it's easiest to see the differences, but keep in mind that you can do this with any of these properties and even combine them if you need to.

When placing 4 values after a property, the sides of the border are defined in the following order: top, right, bottom, left. Here's an example using style="border-color: blue red #00ff00 yellow; border-width: 5px; border-style: solid;" (remember that we still must include the border-width and border-style properties; all 3 must come as a package):

Changing the properties of each side like this is something we can't do with the shorthand border. As we've said, 4 values defines the top, right, bottom, and left sides in that order. Hopefully you've figured out that if we use just 1 value, it defines all 4 sides. What if we just use 3? In this case, the first value defines the top, the second defines both left and right, and the third and final value gives us the bottom edge. Let's try style="border-color: blue magenta red; border-width: 5px; border-style: solid;" and see what happens:

When dropping down to just 2 values, the first defines the top and bottom while the second defines left and right. Here's one more example using style="border-color: orange cyan; border-width: 5px; border-style: solid;":

It can be a little tough to remember which does what; of course you can just remember the "top - right - bottom - left" order and use the same value as needed. For instance border-width: 10px 20px; (10px for top and bottom, 20px for right and left) can also be expressed as border-width: 10px 20px 10px 20px; or even border-width: 10px 20px 10px; - they all mean the same thing. Conversely, border-width: 4px; can also be expressed as border-width: 4px 4px 4px 4px;. You can even use zeros ("0") if needed. Still confusing? Don't fret. Fortunately you won't need to worry about that if you use the next method to do essentially the same thing!

It's worth demonstrating all that can be done once you start playing with all 3 properties on all 4 sides. You can manipulate more than one value and create monstrosities like this, thought I don't know why you'd ever need them...

This was made using style="border-color: orange yellow brown red; border-width: 20px 5px 1px 40px; border-style: outset inset dashed ridge;", defining the border as having a red left edge, 40px wide, and in the "ridge" style, a right border 5px wide, yellow in color, and in the "inset" style, an orange top border in the "outset" style, 20px thick, and a bottom border in the "dashed" style, 1px thick, and brown in color. A little crazy, eh?

---

Defining Different Sections of a Border

Now we're going to define individual parts of the border in a bit of a different way. In a way, you can think of it as a combination of the previous method and the shorhand method.

Here we define the properties of each side using border-left, border-right, border-top, and border-bottom. We use these similar to how we'd use the shorthand, only this way we define a single side at a time. First we provide a value for the width, followed by the style, and finally the color. For example style="border-bottom: 8px dotted #00ff7f;" gives us a border on only the bottom that's 8px thick, "dotted" style, and the color #00ff7f (spring green). Note that if we use this on an element with no default borders yet specified (such as the page's external CSS file), it will cause only a bottom border to appear. Here's an example using the above on a box that's the same size and shape of the boxes in previous examples except I've filled in the background to give some perspective to the border (otherwise it would just look like a random line):

This can be useful in some circumstances, such as if you needed only a partial border for some reason. If there is a default border in place, you can always set the other sides to "0" to get rid of them. For instance, what if the above example had a default border of border: 1px solid black? Our dotted line will override the bottom solid black line, but if we want to get rid of the other 3 sides, we'll need to add border-top: 0; border-right: 0; border-left: 0; to our inline CSS.

This method affords you all the same flexibility as the above method whereby multiple values are used to denote a certain side(s) of the border. Remember the "crazy" borders we made above? We can define those exact same parameters using each side instead of each individual border property as well. Take a look.

Kinda neat, huh? As long as you can remember either the order of the sections depending on how many values or given or the order of the properties in the shorthand method, you're good to go! However, if it still gets you confused or you need to be ultra specific and unambiguously clear for some reason, you can use the next method. It's no more or less precise, but it lets you define every single property of every single side individually.

---

Defining Each Property for Each Side Individually

This represents the most labor-intensive method of them all, but it cuts out needing to understand the shorthand method at all nor will you need to memorize the order and combinations of sections presented in the second method. Here we combine each of the 3 properties with each of the 4 sides to create delcarations like border-left-style: double; and border-top-width: 9px;. This can be useful if you're defining a single border for some reason - such as a decorative element or where 2 or more elements meet, but otherwise it's pretty rare. You wouldn't want to code an entire border like this, but you could if you had to and it'd work just as well.

Let's take our "crazy" example from before and see just what it would look like to write all of it out!

It's a surefire way to get it right if you're ever in doubt...just know that there are easier ways to get it done!

---

Implementing Borders

So far we've discussed in detail how to create borders, but now we need to go over how to actually put them to use. I've been dropping the inline CSS "code" necessary to use the examples given, but if you're not familiar with HTML, you may not have any clue where to put them.

Borders can be used on almost any element, block or inline. When you want to use a border, you only need to stick one of those snippets (such as style="border: 6px double blue;" into an opening HTML tag. You can tell an opening tag apart from a closing tag because closing tags always have a backslash ( / ) whereas opening tags do not. Some tags are self-closing, such as those inserting horizontal lines (hr) or images (img). Borders are added into these just as they are in an opening tag.

So how do you know what you want to put a border around? First you have to find the tag...and know what the tag stands for. I can't possibly go over every single compatible tag, but I can give you some common (as well as a few ridiculous) examples. For example <p> opens a paragraph. (I should tell you that WordPress doesn't show p tags in the Text editor, though you can create them without incident. The tags are "there" inasmuch as they are inserted into the final, published post, but for some reason WP doesn't show them even when working in the Text editor.) If you wanted to create a border around a paragraph, you'd insert the above snippet directly into the <p> tag. Then it would look like this: <p style="border: 6px double blue;">. Easy enough?

Other common places to use borders would be lists - ol and ul tags, images - img tags, and tables - table tags. Here are a few examples of what the HTML will look like before and after adding a border, with the added border "code" shown in red:

Make sense? As I've said before, you can stick that code pretty much anywhere, though it's not always prudent. Here's a good way to abuse borders: take the tag <em>: this is a tag used to italicize text. Typically it looks like <em>italicized text goes here</em>, but we can actually add the code for a border so that it looks like this: <em style="border: 5px outset cyan;">italicized text here</em>. Can you guess what happens? Not only is the text now italicized, but it has a border now. The final product looks totally ridiculous. I suppose you could use something like border-bottom to create a weird underline effect like this, but it's still bizarre and excessive if you ask me. CSS/HTML can be pretty powerful once you start to see how all the pieces fit together, but restraint is key - just because we can do it doesn't mean we should!

---

Got all that? If so, then great! You know pretty much all there is to know about creating borders in HTML/CSS. All that's left to learn is how to use them, but fortunately borders are a pretty self-explanatory concept and if you understand what I've done in the examples above you should know everything you need to effectively use them. Again, things can get pretty crazy - you could always start sticking divs around HTML elements and stacking boders on top of each other like this:

That's a div with a dotted rose border nested inside of a div with a magenta dashed border in a div with a double blue border within a solid cyan border in an inset green border in an outset yellow border in a ridge orange border all tucked into a div with a red groove border!

Well that's it for me this time, and I hope to see some borders popping up soon! If you have any questions, as always, I'm here to help. Good luck!

---

NerdBerry NerdBerry@NerdBacon.com	The Cubist TheCubist@NerdBacon.com
Doc Croc DocCroc@NerdBacon.com