Dunque, premetto che con i CSS sono alle prime armi, quindi spero di non dire troppe scemenze...
Comunque, una soluzione potrebbe essere quella di inserire all'interno di ciascuno dei tre <div> un altro <div>, dichiarato, ad esempio, con la classe "border", che ha la funzione di creare i bordi.
Questi tre <div> avranno un'altezza del 50% rispetto al box contenitore e saranno dichiarati relative, con uno spostamento del 25% dal margine superiore.

Ecco qui il contenuto dei CSS:
codice:
#container {
            width: 700px;
            height: 300px;
            margin: 10px; padding: 10px;
            background-color: #95D7EA;
            border: 1px solid #2363D7;
           }
div.box {
         float: left;
         width: 33%;
         height: 100%;
         margin: 0; padding: 0;
         background-color: #2363D7;
        }
div.border {
            position: relative;
            top: 25%;
            width: 100%;
            height: 50%;
            border-left: 2px solid black;
           }
div.box:first-child > div.border {
                                  border-left: none;
                                 }
E questo è il codice HTML:
codice HTML:
<div id="container">
  <div class="box">
    <div class="border"></div>
  </div>
  <div class="box">
    <div class="border"></div>
  </div>
  <div class="box">
    <div class="border"></div>
  </div>
</div>