CSS Border

CSS Border

1. Border Style

The border-style property specifies what kind of border to display.
The following values are allowed:

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

Result :

2. Border Width

  • The border-width property specifies the width of the four borders.
  • The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
  • The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 2px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: double;
    border-width: 15px;
}

p.six {
    border-style: double;
    border-width: thick;
}

p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>

<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>

<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>

</body>
</html>


3. Border Color

  1. The border-color property is used to set the color of the four borders.
  2. The color can be set by:
    • name - specify a color name, like "red"
    • RGB - specify a RGB value, like "rgb(255,0,0)"
    • Hex - specify a hex value, like "#ff0000"
    • transparent
  3. The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
  4. If border-color is not set, it inherits the color of the element.

Example :


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

p.two {
    border-style: solid;
    border-color: green;
} 

p.three {
    border-style: solid;
    border-color: red green blue yellow;
} 
</style>
</head>
<body>

<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A solid multicolor border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>
</html>


4. Border - Individual Sides

  • From the examples above you have seen that it is possible to specify a different border for each side.
  • In CSS, there is also properties for specifying each of the borders (top, right, bottom, and left)

Example :

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
</style>
</head>
<body>

<p>2 different border styles.</p>

</body>
</html>

The example above gives the same result as this:

p {
    border-style: dotted solid;
}

So, here is how it works:
If the border-style property has four values:
  1. If the border-style property has four values:
  2. border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  3. If the border-style property has three values:
  4. border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  5. If the border-style property has two values:
  6. border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  7. If the border-style property has one value:
  8. border-style: dotted;
    • all four borders are dotted

5. Border - Shorthand Property

The border property is a shorthand property for the following individual border properties:
  • border-width
  • border-style (required)
  • border-color
Example :

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 5px solid red;
}
</style>
</head>
<body>

<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and border-color:</p>

<div>This is some text.</div>

</body>
</html>