Set border style in four directions differently and separately in HTML and CSS

Description

The following code shows how to set border style in four directions differently and separately.

Example


<!--   w ww.  j a  v  a 2  s  . co  m-->
<html>
<head>
<style type='text/css'>
body {
font: 12px sans-serif;
}
div#border-style-properties {
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: double;
border-left-style: inset;
}

</style>
</head>
<body>
<div id='border-style-properties'>
Peter Piper picked a peck of pickled peppers.
Did Peter Piper pick a peck of pickled peppers?
If Peter Piper picked a peck of pickled peppers,
where's the peck of pickled peppers Peter Piper picked?
</div>

</body>
</html>

Click to view the demo

The code above generates the following result.

Set border style in four directions differently and separately in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Border

...
Overwrite border in HTML and CSS
Set Border width differently for four direc...
Set Border width for different directions i...
Set Border width in four differently values...
Set Border width in one value in HTML and C...
Set Border width in three values in HTML an...
Set Border width in two values in HTML and ...
Set border - 1px solid crimson in HTML and ...
Set border-bottom - 1px dotted black in HTM...
Set border bottom style to dashed in HTML a...
Set border-bottom-style to double in HTML a...
Set border-bottom-width to 2px in HTML and ...
Set border color for different directions i...
Set border-color to blue in HTML and CSS
Set border color to red in HTML and CSS
Set border-left-style to inset in HTML and ...
Set border-left to 1px solid crimson; in HT...
Set border-right-style to dashed in HTML an...

Set border style in four directions differe...