CSS Tutorials

Border In CSS
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:

  1. border-width
  2. border-color
  3. 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

 

Simple Example
<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

Tolal:0 Click:

Show All Comments

Did not find what you were looking for leave your name and message. We will revert within 24 hours
Name:
eMail:
Comment / Feedback: