The border and border-*** properties are a shorthand property for setting all border properties.
(*** = top, bottom, left, and right)
border : This is a shorthand property for setting all border properties for the four borders.
border-*** : Sets all border properties of the top, bottom, left, and right borders.
div {
border: thick red solid;
}
p {
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
}
border : This is a shorthand property for setting all border properties for the four borders.
| Property | Value | Explanation |
|---|---|---|
| border | each value | sets width, color, and style |
border: thick red solid;
| border: | thick | red | solid | ; |
|---|---|---|---|---|
| border- | width | color | style |
The unnecessary values can be omitted.
border: thick solid;
Please note that the default value of border style is "none".
border-*** : Sets all border properties of the top, bottom, left, and right borders.
| Property | Value | Explanation |
|---|---|---|
| border-top | each value | the top border |
| border-right | each value | the right border |
| border-bottom | each value | the bottom border |
| border-left | each value | the left border |
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
<html>
<head>
<title>TAG index</title>
<style type="text/css">
h2 {
border-top: medium red dotted;
border-right: thick blue double;
border-bottom: medium green dashed;
border-left: thick gray groove;
}
h3, span {
border: medium red dotted;
}
</style>
</head>
<body>
<h2>Specifies four different borders</h2>
<h3>Specifies the red dotted border</h3>
<p>Specifies the <span>red dotted</span> border</p>
</body>
</html>
Specifies the red dotted border