Borders

ON THIS PAGE

Properties List
Notes
Examples

The CSS properties in the table below are all shorthand properties that can be used to define the borders on various components on your web page. These properties are typically applied to block elements but you can also apply them to images and some form elements. These include the following:

body, p, div, blockquote, table, td, ul, ol, li, form, input, textarea, select, img

CSS Properties List 3 - Borders

Property Name	Some Possible Values	What It Does
border	1px solid black	Defines all borders
border-top	1px solid black	Defines top border
border-bottom	1px solid black	Defines bottom border
border-left	1px solid black	Defines left border
border-right	1px solid black	Defines right border

NOTES:

Pixels (px) ~ This sets the thickness of the border in pixels. The syntax is any number followed by px.

Example: border: 1px solid;

There are other measurements you can use to define the thickness of borders but personally I think it's best to use pixels to maintain a tight control on how your web page looks. (More about pixels...)
Border
Border-top
Border-bottom
Border-left
Border-right

These are all shorthand CSS properties, i.e., they allow you to apply several different values to a kind of 'all-purpose' property thus saving space and time.

For example, if it were written in 'longhand', you could conceivably be writing twelve different style declarations to apply width, style and color to all four borders of a block element. The following example will illustrate:

DIV { border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-style: solid; border-top-color: black; border-bottom-color: black; border-left-color: black; border-right-color: black; }

DIV { border: 1px solid black; }

Click on the buttons above to see the difference between writing CSS longhand and CSS shorthand. Both of the above examples will produce the exact same result.

Using the properties border and border-top as examples, the shorthand syntax is written as follows:

border: width style color;
border-top: width style color;

OR just simply...

border: width style;
border-top: width style;

In the above:
1. width = Any CSS measurement but it's easiest to use pixels - e.g., 1px
2. style = Any one of the following:
  - none - No border. Same as setting the border-width to 0px.
  - dotted - The border is drawn as a series of dots.
  - dashed - The border is drawn as a series of dashes.
  - solid - The border is drawn as a solid line.
  - double - The border is drawn as two solid lines.
  - groove - The border appears carved into the canvas.
  - ridge - The opposite of 'groove': the border appears as though it were coming out of the canvas.
  - inset - The border is drawn to apply a 3D inset appearance to the block element.
  - outset - The opposite of 'inset': The border is drawn to apply a 3D outset appearance to the block element.
  (NOTE: When style is omitted, the border style defaults to none. Hence if you want to actually create a border, it is necessary to declare style [and width if you don't want to use browser defaults (usually around 2 pixels)]. Values declaring color may be omitted.)
3. color = Any named color or hexadecimal color code, e.g., red, green, blue, #ffffcc, etc. (Please see font color for more about what colors you can use for any HTML or CSS code.)
  (NOTE: When color is omitted, the border is rendered in the same color as the element's defined or inherited color. (See Font Styles properties for more information about the color property.)

EXAMPLES:

Here's an example of an inline style applied to a paragraph tag using some of the CSS properties described in the table above:

Example 1 - INLINE STYLE

<p style="border: 3px double red;">How now brown cow</p>

OR...

The same thing could be declared as an embedded stylesheet in the document head:

Example 2 - EMBEDDED STYLE SHEET

<style type="text/css">

<!-- 

p {


   border: 3px double red;

}

-->

</style>

...and in the document body, you would simply put this:

<p>How now brown cow</p>

Both Example 1 and Example 2 will produce the following effect:

How now brown cow

* * *

And to complement your ability to draw borders on block elements, you'll want to learn how to apply backgrounds...

MORE CSS PROPERTIES: