| Previous | Home | Next |
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.
Without CSS, your choices for borders were those dull grey ones that surrounded tables and frames. Now however, since page presentation has become such an important aspect of web-design, stylesheets allow you lots of variety in your borders, and you can apply them to anything you want.
There are mainly divided into three parts:
- border-width
- border-color
- border-style
Border-width
Specifies the width of the border. Default value is "medium".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.
border-width: value;
Values:
- Length
- Thin
- Medium
- Thick
Border-color
Specifies the color of the border. Default value is the color of the element. 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.
border-color: value;
Values:
- color name
- hexadecimal number
- RGB color code
- transparent
Border-style
Specifies the style of the border. Default value is "none".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.
border-style: value;
Values:
- dashed
- dotted
- double
- groove
- hidden
- inset
- none
- outset
- ridge
- solid
<html>
<head>
<title>Border style In CSS</title>
<style type="text/css">
p.solid {border-style: solid;
border-width:5px;
border-color:red;
width:25%;
}
p.double {border-style: double;
border-width:10px;
border-color:blue;
width:25%;
}
p.groove {border-style: groove;
border-width:5px;
border-color:#660066;
width:25%;
}
p.dotted {border-style: dotted;
border-width:2px;
border-color:#CC33FF;
width:25%;
}
p.dashed {border-style: dashed;
border-width:5px;
border-color:#FF9999;
width:25%;
}
p.inset {border-style: inset;
border-width:5px;
border-color:#33FF00;
width:25%;
}
p.outset {border-style: outset;
border-width:5px;
border-color:#003300;
width:25%;
}
p.ridge {border-style: ridge;
border-width:5px;
border-color:#666600;
width:25%;
}
p.hidden {border-style: hidden;
border-width:5px;
border-color:#00FFFF;
width:25%;
}
</style>
</head>
<body>
<p class="solid">This is used to show the border style</p>
<p class="double">This is used to show the border style</p>
<p class="dashed">This is used to show the border style</p>
<p class="dotted">This is used to show the border style</p>
<p class="groove">This is used to show the border style</p>
<p class="hidden">This is used to show the border style</p>
<p class="inset">This is used to show the border style</p>
<p class="outset">This is used to show the border style</p>
<p class="ridge">This is used to show the border style</p>
</body>
</html>
Output
| Previous | Home | Next |