| <!doctype html> |
| <style> |
| div { |
| width: 10px; |
| height: 100px; |
| display: inline-block; |
| border-width: 85px; |
| border-color: rgba(0, 255, 0, 0.5); |
| border-right-color: rgba(0, 0, 255, 0.5); |
| } |
| .dashed { border-style: dashed; } |
| .dotted { border-style: dotted; } |
| .solid { border-style: solid; } |
| .double { border-style: double; } |
| .groove { border-style: groove; } |
| .ridge { border-style: ridge; } |
| .inset { border-style: inset; } |
| .outset { border-style: outset; } |
| </style> |
| <div class="dashed"></div> |
| <div class="dotted"></div> |
| <div class="solid"></div> |
| <div class="double"></div> |
| <br> |
| <div class="groove"></div> |
| <div class="ridge"></div> |
| <div class="inset"></div> |
| <div class="outset"></div> |
