Remove the border at the intersection of circle and rectangle with css

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/

score 0 · Accepted Answer · edited May 23 '17 at 12:07

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.

if i change the spacing, the text gets cut off because it is behind the white circle, how can i fix that? and also what properties would i change to move the circle to the left more? — seesoe, Jan 30 '13 at 20:17
The `left` positioning moves the circle, and padding/margins on your text will affect things. It might be best to use `em` units for positioning, as that will flex with the size of font. But it all depends upon your application. — ScottS, Jan 30 '13 at 20:35
perfect, and how can i make the text show in front of the white circle? http://jsfiddle.net/TH5E5/16/ — seesoe, Feb 01 '13 at 03:01
@user1799306: I thought from your original set up that the text would be beside the image, but I have modified the answer to accommodate your text overlap. — ScottS, Feb 01 '13 at 04:00

Remove the border at the intersection of circle and rectangle with css

1 Answers1

Use a Pseudo-Element for the Border

To get Text to Overlap the Image