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>
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 hidden 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>
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>
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.