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
Makeup Artist 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

CSS Tutorial - Working with Borders

    Page 1 of 2
 
 
Overview
 

In this chapter you will learn:

  • How to customize the border using various styles
  • Applying border style properties with respect to each edge of an element
  • Defining the border width
  • Specifying different colors for the border edges

CSS makes possible a lot of customization  to be added to your web document. It is possible to put borders around elements with CSS. Various border properties let you modify the border using varying styles, colors and widths.

A border around an element can be created with the attributes: border style, border width, and border colors.

Border Style

The way the border will look constitutes the border style. Possible values for style are: none, dotted, groove, dashed, ridge, inset, outset. Border style can be used to give different styles to each edge of an element.

  • If only one border style value is specified, then the same border style is applied to each of the edges.                              
Example

table { border-style : dashed;}

In this, all the four borders will be dashed.

 
  • If two styles are defined, then the first value is for the top and bottom edges, the second specifies the border style of the left and right edges.
Example
table { border-style : dotted dashed;}

In this, the border of top and bottom edges will be dotted and left and right border will be dashed.
 
  • When three border styles are defined, the first value specifies the border style of the top edge; the second value for the left and right edges and the third value for the bottom edge.
Example
table { border-style : dashed dotted groove;}
In this example, the top edge will be dotted, left and right border will be dashed and bottom border will be grooved.
 
  • When four border styles are defined, they are specified for top, left, bottom and right edges respectively.
Example
table { border-style : double dashed dotted solid;}
In this example, the top border will be double, right border will be dashed, bottom border will be dotted and left border will be solid.
 


Possible style values are :

  • none - It defines no color.
  • dotted - It defines a dotted border.
  • dashed - It defines a dashed border.
  • solid - It defines a solid border.
  • double - It defines 2 borders.
  • grooved - It defines a 3-D grooved border.
  • ridge - It defines a 3-D ridged border.
  • inset - It defines a 3-D inset border.
  • outset - It defines a 3-D outset border.

We can also explicitly define various border style properties corresponding to each edge. They are explained below.

Border-Bottom-Style

This property sets the border style for bottom edge.

Example

p { border-bottom-style : dotted;}

 

Here the bottom is Dotted

Border-Top-Style

This property sets the border style for top edge.

Example

p { border-top-style : dashed;}

 

   In this example, top edge is dashed.

Border-Left-Style

This property sets the border style for left edge only.

Example

 

p { border-left-style : inset;}

 

 See the left side, with inset border style property.

Border-Right-Style

This property sets the border style for right edge.

Example

 

p { border-right-style : ridge;}

                                         

Here, right edge has the border style with ridge value


                 

 

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