Question

is it possible to draw a final border around these 2 shapes without having the border of the circle on the left and the right?

heres what i have so far

<div class="site-header1">
  <div class="logo">
    <div class="text">
      <span>Class</span>
      <span>Class</span>
    </div>
    <div class="img"></div>
 </div>
</div>

css

.site-header1 .logo{
    position:relative;
    height: 80px;
}

.site-header1 .logo .text{
    padding: 10px;
    font-weight: lighter;
    font-family: 'Lato', sans-serif;
    font-size:1.5em;
    border-radius: 25px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    top: 17px;
}
.site-header1 .logo .text span+span{
    padding-left:75px;
}
.site-header1 .logo .img{
    border-radius: 100px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    left: 75px;
    top: 7px;
    height: 70px;
    width: 70px;
}

i have a fiddle started here http://jsfiddle.net/TH5E5/

Answer 1

While I believe you could use background gradients to possibly get the effect (something similar to what is done for this answer), an easier route is to…

Use a Pseudo-Element for the Border

This fiddle seems to be what you want, and looked good to me in Chrome, Firefox, and IE9. It puts the border on a pseudo-element to push the circle with border behind the main shape, then uses the .img itself to overlay the borders of that shape. Here is the changed portion of your css code (your html is the same as you had it, and so is most of your original css):

Changed/Added CSS

.site-header1 .logo .img { /*this is the image itself */
    border-radius: 99px; /* 1px less than the border */
    background:white;
    border:0;
    position:absolute;
    left: 76px; /* 1px more than border below */
    top: 8px; /* 1px more than border below */
    height: 70px;
    width: 70px;
}
.site-header1 .logo:after { /*this is the image border */
    content: '';
    border-radius: 100px;
    background:white;
    border:1px solid rgba(0, 0, 0, 0.5);
    position:absolute;
    z-index: -1; /* push it behind */
    left: 75px;
    top: 7px;
    height: 70px;
    width: 70px;
}

To get Text to Overlap the Image

Change some properties:

.site-header1 .logo .text {
    /* position: absolute; needs to be removed */
    display: inline-block;
    margin-top: 17px; /* this replaces the top: 17px when it was absolute */
}

Then add the following to push the text above the img:

.site-header1 .logo .text span {
    position: relative;
    z-index: 1;
}

See the result in this fiddle.