Home >>CSS Tutorial >CSS Border

CSS Border property

CSS Border

The CSS border property is a shorthand property that allows you to specify the style, width, color, and size of an element’s border.

There are following CSS border properties are given below:

  • CSS Border Style
  • CSS Border width
  • CSS Border color

CSS Border Style

The border-style property is used to specify what kind of border type you want to display on the web page.

The following values are allowed:

  • dotted – It creates a dotted border
  • dashed – It creates a dashed border
  • solid - It creates a solid border
  • double - It creates a double border
  • groove - It creates a 3D grooved border. The groove effect is depends on the value of border-color
  • ridge - It creates a ridge border. The ridge effect is depends on the value of border-color
  • inset – It creates a 3D inset border. The inset effect is depends on the value of border-color
  • outset – It creates a 3D outset border. The outset effect is depends on the value of border-color
  • none - This one is Defines no border
  • hidden – This one is Defines a hidden border

You can define the border-style using the property from one to four values (for the top border, right border, bottom border, and the left border).

Let's take an example of border style:

<!DOCTYPE html>
<html>
<head>
<style>
h2.dotted {border-style: dotted;}
h2.dashed {border-style: dashed;}
h2.solid {border-style: solid;}
h2.double {border-style: double;}
h2.groove {border-style: groove;}
h2.ridge {border-style: ridge;}
h2.inset {border-style: inset;}
h2.outset {border-style: outset;}
h2.none {border-style: none;}
h2.hidden {border-style: hidden;}
h2.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2> border-style Property</h2>
<p>This property defines what kind of border you want to display:</p>
<h2 class="dotted">A dotted border. </h2>
<h2 class="dashed">A dashed border. </h2>
<h2 class="solid">A solid border. </h2>
<h2 class="double">A double border. </h2>
<h2 class="groove">A groove border. </h2>
<h2 class="ridge">A ridge border. </h2>
<h2 class="inset">An inset border. </h2>
<h2 class="outset">An outset border. </h2>
<h2 class="none">No border. </h2>
<h2 class="hidden">A hidden border. </h2>
<h2 class="mix">A mixed border. </h2>
</body>
</html>
Output :


border-style Property

This property defines what kind of border you want to display:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A mixed border.

 

CSS Border Width

This property defines the width of the four borders.

The width can be set by using one of the three pre-defines values like: thin, medium, or thick or can be set as a specific size (in cm, px, em, pt, etc).

This Property contains one to four values (for the top border, right border, bottom border, and the left border).

Let’s take an example of border-width:

<!DOCTYPE html>
<html>
<head>
<style>
h4.one {
  border-style: solid;
  border-width: 5px;
}
h4.two {
  border-style: solid;
  border-width: medium;
}
h4.three {
  border-style: dotted;
  border-width: 2px;
}
h4.four {
  border-style: dotted;
  border-width: thick;
}
h4.five {
  border-style: double;
  border-width: 15px;
}
h4.six {
  border-style: double;
  border-width: thick;
}
h4.seven {
  border-style: solid;
  border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property defines the width of the borders:</p>
<h4 class="one">Some text.</h4>
<h4 class="two">Some text.</h4>
<h4 class="three">Some text.</h4>
<h4 class="four">Some text.</h4>
<h4 class="five">Some text.</h4>
<h4 class="six">Some text.</h4>
<h4 class="seven">Some text.</h4>
<p><b>Note:</b> If the "border-width" property used alone it does not work. To set the border always specify the "border-style" property.</p>
</body>
</html>
Output :


The border-width Property

This property defines the width of the borders:

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

Note: If the "border-width" property used alone it does not work. To set the border always specify the "border-style" property.

CSS Border Color

This property is used to set the color of the borders.

You can also set the color by:

  • name – It specify a color name, like "red"
  • RGB - It specify a RGB value, like "rgb(255,0,0)"
  • Hex – It specify a hex value, like "#ff0000"

The border-color Property contains one to four values (for the top border, right border, bottom border, and the left border).

It inherits the color of the element , If border-color is not set.

Let’s take an example of Border color:

<!DOCTYPE html>
<html>
<head>
<style>
h2.one {
  border-style: solid;
  border-color: red;
}
h2.two {
  border-style: solid;
  border-color: green;} 

h2.three {
  border-style: solid;
  border-color: red green blue yellow;
} 
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property Defines the color of the borders:</p>
<h2 class="one">A solid red border</h2>
<h2 class="two">A solid green border</h2>
<h2 class="three">A solid multicolor border</h2>
<p><b>Note:</b> If the "border-color" property used alone it does not work. To set the border first always specify the "border-style" property.</p>
</body>
</html>
Output :


The border-color Property

This property Defines the color of the borders:

A solid red border

A solid green border

A solid multicolor border

Note: If the "border-color" property used alone it does not work. To set the border first always specify the "border-style" property.