Bookmark and Share

CSS Border

CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements. With HTML, it used to be impossible to place a border around an element, except for the table. CSS Borders let you create crisp, customized border styles with very little work, compared to the antiquated methods of HTML.

Advertise on Tizag.com

Border Style Types

There are numerous types of border styles at your disposal. We recommend that you experiment with many color/border-style combinations to get an idea of all the different looks you can create. Note: We have used CSS Classes below, so check out the CSS Classes lesson if you do not understand.

CSS Code:

p.solid {border-style: solid; } 
p.double {border-style: double; } 
p.groove {border-style: groove; } 
p.dotted {border-style: dotted; } 
p.dashed {border-style: dashed; } 
p.inset {border-style: inset; } 
p.outset {border-style: outset; } 
p.ridge {border-style: ridge; } 
p.hidden {border-style: hidden; }

Display:

This is a solid border

This is a double border

This is a grooved border

This is a dotted border

This is a dashed border

This is an inset border

This is an outset border

This is a ridged border

This is a hidden border

This is probably obvious, but the default border-style setting for an element is hidden.

Border Width

To alter the thickness of your border use the border-width attribute. You may use key terms or exact values to define the border width. Note: You must define a border-style for the border to show up. Available terms: thin, medium, thick.

CSS Code:

table { border-width: 7px; 
border-style: outset; } 
td { border-width: medium; 
border-style: outset; }
p { border-width: thick;
border-style: solid; }

Display:

This table has an outset border with a width of 7 pixels.
Each cell has an outset borderwith a "medium" width.

This paragraph has a solid border with a "thick" width.

Border Color

Now for the creative aspect of CSS Borders! With the use of the border-color attribute, you will be able to create customized borders to fit the flow and layout of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.

CSS Code:

table { border-color: rgb( 100, 100, 255); 
border-style: dashed; } 

td { border-color: #FFBD32; 
border-style: ridge; }

p { border-color: blue;
border-style: solid; }

Display:

This table has a dashed border with the RGB value ( 100, 100, 255).
Each cell has a ridged border with a hexadecimal color of #FFBD32.

This paragraph has a solid border with a color of "blue".

Border: border-(direction)

If you would like to place a border on only one side of an HTML element, or maybe have a unique look for each side of the border, then use border-(direction). The direction choices are of course: top, right, bottom, and left. CSS allows you to treat each side of a border separately from the other three sides. Each side can have its own color, width, and style set, as shown below.

CSS Code:

p { border-bottom-style: dashed ; 
border-bottom-color: yellow; 
border-bottom-width: 5px; }

h4 { border-top-style: double; 
border-top-color: purple; 
border-top-width: thick; }

h5 { border-left-style: groove; 
border-left-color: green; 
border-left-width: 15px; 
border-bottom-style: ridge; 
border-bottom-color: yellow; 
border-bottom-width: 25px; }

Display:

This only has a bottom border

This header has a top only border.

This header has a left and bottom border.

Border: All in One

While it is nice that CSS allows a web developer to be very specific in creating a customized border, sometimes it is just easier and less of a headache to create a uniform border, all in single line of CSS code. Most of the borders you see on Tizag are created in this manner.

CSS Code:

p { border: 20px outset blue ;} 
h4{ border: 5px solid; } 
h5{ border: dotted; }

Display:

This blue, outset border was defined in 1 line of CSS code.

We did not set the border-color for this header, so the default value is used.

This header only had the style defined.
Bookmark and Share




Found Something Wrong in this Lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Try it out!


Advertise Here

More Tutorials!
Microsoft Office Tutorials Artist Tutorials