ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

  Home > Courses, Tutorials & eBooks > CSS Tutorial > Working with Borders
 
Previous Next

CSS Tutorial - Working with Borders

    Page 2 of 2
 

Border Width

The width of the border is the amount of space on the page that the border will take up. Possible values for border width can be:

  • thin - It defines a thin border.
  • medium - It defines a medium border.
  • thick - It defines a thick border.
  • length - It allows the user to specify the thickness of the border.

The border width property can also be used to give a different width to each edge of the element. For this purpose,  more than one value for the property can be used.

  • If only one value is specified then the same width is set for all borders.
Example
table { border-width : thin;}
In this, all four borders will be thin.
 
  • If two values are defined then top and bottom edges are set to first value. Left and right are set to the second value.
Example
table { border-width : thin  thick;}
In this, the top and bottom borders will be thin whereas left and right borders will be thick.
 
  • If three values are defined, then top edge width is set to the first value, left and right edge width to the second value, and the bottom edge width to the third value.
Example
table { border-width : thin thick medium;}
In this, the top border will be thin, left and right border will be thick, and bottom border will be medium.
 
  • If four values are defined, then the first value is set for the top edge width, second value for the left edge width, third value for the bottom edge width, and the fourth value for the right edge width.
Example
table { thin thick medium none;}
In this, the top border will be thin, right border will be thick, bottom border will be medium and left edge will have no border.
 
Note
Always declare the Border-style property before using the border-width property. An element must have borders before you change their width.

Border width properties can also be explicitly defined corresponding to each edge. These are explained below.

Border-Bottom-Width

This property sets the border width for bottom edge.

Example

p { border-style : solid ;

                            border-bottom-width : thick;}

 

                    The bottom width here is thick.

Border-Top-Width

This property sets the border width for top edge.

Example

 

p{ border-style : inset ;

                           border-top-width : 10px;}

 

 

  The top width here is 10 pixel with border style set as inset.

 

Border-Left-Width

This property sets the border width for left edge.     ements.

Example:

p{ border-style : dashed;

                           border-left-width : 12px;}

 

 

   The left width is 12 pixel with border style set as dashed.

Border-Right-Width

This property sets the border width for right edge.

Example

 

               p{ border-style : double;

                           border-right-width : 12px;}

                     

  The right width is 12 pixel with the border style set as double.

 

Border colors

Colors can also be defined to match with your web pages. Border color property sets the color of the four borders. Possible values for border-color property are:

  • color - The color value can be a color name ( like, red, green, blue, black etc.) or an rgb value ( like rgb(255,255,0), i.e. defining value for each red, green and blue) or a hexadecimal number ( like #00ff00).
  • transparent - The border is transparent .

Border-color property can be set for each edge to a different color, similarly as different border style and width can be set for each edge.

  • If only one color value is specified, then the same color is set for each of the edges.
Example
table { border-color : red;}
Here all four borders will be of red color.
 
  • If two color values are specified, then the first value is set for the top and bottom edges and the second value is set for the left and right edges.
Example
table { border-color : red blue;}
Here, the top and bottom borders will be red and left and right borders will be blue.
 
  • If three color values are specified, then the first value is set for the top edge, the second value is set for the left and right edges, and the third color value is set for the bottom edge.
Example
table { border-color: red green blue;}
Here, the top border will be red, the left and right border will be green, and the bottom border will be blue.
 
  • If four color values are specified, then all the four color values are set for the top, left, bottom and right edges respectively.
Example
table {border-color : red green blue yellow;}
Here, the colors red, green, blue, and yellow will be applied to top, right, bottom and left borders respectively.
 
Note

If only border-style property is set then only border color of the element will be drawn.

 

Border color properties can also be explicitly defined corresponding to each edge:

Border-Bottom-Color

This property sets the border color for bottom edge.

Example

p{ border-style : double;

                           border-bottom-color : red;}                     

 

In this example, border style is double with bottom border color as red.

Border-Top-Color

This property sets the border color for top edge

Example

p{ border-style : dashed;

                           border-bottom-color : rgb(112,255,112);}                   

 

Here, border-style is dashed and bottom edge has a color defined by using rgb value.

Border-Left-Color

This property sets the border color for left edge.

Example

p{ border-style : dotted;

                           border-left-color : #ff00ff;}

In this example, border style is dotted and left edge has a color defined using hexadecimal number.

Border-Right-Color

This property sets the border color for right edge.

Example

p{ border-style : solid;

                           border-right-color : #purple;}

                    

  In this example, border style is solid and left border color as purple.

 
 
Summary
 

In this chapter you have learnt:

  • Various style options available for borders
  • How border-style properties can be applied corresponding to each edge of the element
  • How to specify the border-width
  • Specifying the border color
 
 
Review Questions
 

Fill in the Blanks

  1. If two styles are defined for the border-style property, then first value is for____ and ____ edges and the second value specifies _____ and ____ edges.
  2. _____ property specifies the amount of space that the border will take up.
  3. If 'border-style : dashed' is defined, then it will set the border style for _____ edges.
Solutions
  1. Top, bottom, left, right
  2. Border-width
  3. All

State Whether True or False

  1. The property {border-bottom-grooved}, sets the border style grooved for top edge.
  2. Border style should be declared first before setting its width.
  3. {border-color: red green blue}, will set the left border to red, top and bottom border to green and right border to blue.
Solutions
  1. False
  2. True
  3. False
Exercise
Create a table with different border styles.
Solution
View Code         View Runtime

 

 
What's Next

The next chapter introduces the concepts of  margin and padding around elements. It will also define setting of space around each edge of the HTML element. 

               Hop over to the next chapter to get a  close-up on margins and paddings. 

 
 
                 

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2006. All Rights Reserved.