Using the border Shorthand Properties

Description

You can use shorthand properties that set all three values in one step.

  • border
    Sets the border for all edges.
    Value: width style color
  • border-top
    border-bottom
    border-left
    border-right
    Sets the border for a single edge.
    Value: width style color

Example

You set the values for these properties by specifying the width, style, and color values in a single line, separated by spaces.


<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--   w  w  w  . j  a  v  a 2  s  .  com-->
  border: medium solid black;
}
div#shorthand {
    border: 1px solid crimson;
}
</style>
</head>
<body>
  <p>This is a test.</p>
    <div id='shorthand'>border</div>  
</body>
</html>

Click to view the demo

The color for the border-top property is not set. If you omit one or more of the values, the browser will use whatever value has been previously defined.

In this case, the color specified by the border shorthand property.





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table