CSS Borders, CSS Tutorial, Global Guideline

Bookmark Bookmark: CSS Borders, CSS Tutorial
Forum | Blog


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Borders.


     Back             Next     



CSS Border, our personal favorite CSS attribute, allow you to completely customize the borders that appear around HTML elements. With HTML, it used, it is impossible to place a border around an element, except for the table. Cascading Style Sheet Borders let you create crisp, customized border styles with very little work, compared to the antiquated methods of HTML.
Here in CSS Tutorial we will learn that borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.


CSS Border Style [border-style]

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 Cascading Style Sheet Classes section if you do not understand.

Example of CSS Border Style

<style type="text/css">
  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; }
</style>

Output of CSS Border Style

CSS Solid Border style example

CSS Double Border style example

CSS Groove Border style example

CSS Dotted Border style example

CSS Dashed Border style example

CSS Inset Border style example

CSS Outset Border style example

CSS Ridge Border style example

CSS Hidden Border style example


CSS Border Width [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: CSS Tutorial constraint that you must define a border-style for the border to show up. Available terms: thin, medium, thick.

Example of CSS Border Width

<style type="text/css">
  table { border-width: 5px; 
          border-style: outset; } 
  td    { border-width: medium; 
          border-style: outset; }
  p     { border-width: thick;
          border-style: groove;  }
</style>

Output of CSS Border Width

Description of CSS Border Width with Table
This table based on inset border And its Border Width is 5 pixel
Each of its cell based on medium border width And style of border is outset

This paragraph is based on Groove border style with Thick border width


CSS Border Color [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.

Example of CSS Border Color

<style type="text/css">
  table { border-color: rgb( 50, 50, 200); 
          border-style: dotted;                } 
  td    { border-color: #0066CC; 
          border-style: double;                 }
  p     { border-color: lime;
          border-style: ridged;                 }
</style>

Output of CSS Border Color

Description of CSS Border Color with Table
Based on dotted border in CSS Tutorial And its Border color is rgb color pixel
Each of its cell based on double border style with CSS Border color of hexa decimal number

This pera is based on Ridge border style with CSS Border color with its name


CSS 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.

Example of CSS Border Direction

<style type="text/css">

p  {  border-bottom-style: grooved ; 
      border-bottom-color: lime; 
      border-bottom-width: 5px;        }

div { border-top-style:    double;
      border-left-style:   double;
      border-right-style:  double; 
      border-top-color:    orange; 
      border-left-color:   orange; 
      border-right-color:  orange; 
      border-left-width:   thick;
      border-right-width:  thick;
      border-left-width:   thick;      }

</style>

Output of CSS Border Direction

This line has only bottom border because of CSS Border Direction set to bottom only


These lines are based only top left and bottom borders because of CSS Border Direction set to bottom only in CSS Tutorial


CSS Border [border]

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 Cascading Style Sheet code. Most of the borders you see on Tizag are created in this manner.

Example of CSS Border

<style type="text/css">

p    { border: 10px inset #408080 ; } 
div  { border: 10px double;         } 
h1   { border: ridge ;            }

</style>

Output of CSS Border Example

Example of Cascading Style Sheet Inset Border in CSS Tutorial

Example of CSS Double Border in CSS Tutorial

Example of CSS Ridge Border in CSS Tutorial

     Back             Next     


 



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 177 visitors are online now