<html>
   <head>
      <style type="text/css">
        body > div {
          padding: 2px;
        }

        .box {
          display: inline-block;
          margin: 10px;
          height: 100px;
          width: 110px;
          background-color: black;
          border: 20px solid white;
          border-radius: 50px;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        .translucent {
          background-color: gray;
        }
        .translucent > .box {
          background-color: white;
          border-color: rgba(0, 0, 255, 0.5);
        }
        .shadowed > .box {
          box-shadow: 0 0 0 black;
        }
      </style>
   </head>
   <body>
     <div>
      <div class="box"></div>
      <div class="box" style="border-style: double; border-color: groove;"></div>
      <div class="box" style="border-style: groove; border-color: gray;"></div>
      <div class="box" style="border-right-style: double;"></div>
    </div>
    <div class="translucent">
      <div class="box"></div>
      <div class="box" style="border-style: double; border-color: groove;"></div>
      <div class="box" style="border-style: groove; border-color: gray;"></div>
      <div class="box" style="border-right-style: double;"></div>
    </div>
    <div class="shadowed">
      <div class="box"></div>
      <div class="box" style="border-style: double; border-color: groove;"></div>
      <div class="box" style="border-style: groove; border-color: gray;"></div>
      <div class="box" style="border-right-style: double;"></div>
    </div>
   </body>
</html>