CSS BORDER SHORTHAND


We use shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

For example:


<!DOCTYPE html>
<html>
<head>
<style>
p {
/* border: width style color */
   border: 2px solid red;
}
</style>
</head>
<body>

<p>The shorthand border property.</p>

</body>
</html>
Live Demo!


Output:

The shorthand border property.


Using the shorthand method, border-width, border-style & border-color can be specified with a single line of code.


Individual border properties can also be specified for just one side:


<!DOCTYPE html>
<html>
<head>
<style>
p {
  border-top: 3px solid blue;  /*top border specifications*/
  background-color: lightgrey;
}
</style>
</head>
<body>

<p>Individual specs for top border.</p>

</body>
</html>
Live Demo!


Output:

Individual specs for top border.