Page Widget How to - Make right and left borders appears on top of the top border

Question

We would like to know how to make right and left borders appears on top of the top border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
<!--from   w w  w . jav a  2 s  .co m-->
div {
  background: #EEE;
  border-top: 4px solid blue;
  height: 100px;
  position: relative;
  width: 100px;
}

div::after {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0px;
  left: 0;
  right: 0;
  border-right: 4px solid red;
  border-left: 4px solid red;
}
</style>
</head>
<body>
  <div></div>
</body>
</html>

The code above is rendered as follows: