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
| 
Home 