Page Widget How to - Set different colored left and top borders in CSS with straight join

Question

We would like to know how to set different colored left and top borders in CSS with straight join.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!-- www  . jav a 2 s  .c o  m-->
  border: 10px solid black;
  border-left-width: 0;
}

div::before {
  border: 10px solid orange;
  border-right-width: 0;
  content: '';
}
</style>
</head>
<body>
  <div>Container</div>
</body>
</html>

The code above is rendered as follows: