CSS: align border to the circle - css

Question

I'm trying to align the border to the circle, to make it look like clipped there.
Here is an example:
http://jsfiddle.net/Beck/P63VY/1/
<div class="circle">
</div>
<div class="rounded"></div>
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 22px;
top: 23px;
border: 1px solid red;
border-radius: 62px/66px 0px 0px 0px;
width: 200px;
height: 50px;
}
Is there a way to actually clip that top left corner?
Thanks.

Answer 1

try this
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 18px;
top: 15px;
border: 1px solid red;
border-radius:72.5px;
width: 145px;
height: 145px;
}
</style>
<div class="circle">
<div class="rounded"></div>
</div>

Answer 2

Fiddle
The way I did it is:
Place <div class="rounded"></div> inside the <div class="circle">
If you want to keep the position: absolute in .rounded, add position: relative to the parent .circle
Add overflow: hidden to the parent, so the child gets clipped.
Remove all border-radius from the child .rounded since it's no longer needed.
HTML
<div class="circle">
<div class="rounded"></div>
</div>
CSS
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
/* These were added: */
overflow:hidden;
position:relative;
}
.rounded {
position: absolute;
top: 10px;
border: 1px solid red;
width: 200px;
height: 50px;
}

Answer 3

Make the radius the same for both classes and make the height of .rounded to half the height of .circle. I also have changed the left and top values to align it.
HTML
<div class="circle"></div>
<div class="rounded"></div>
CSS
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 12px;
top: 12px;
border: 1px solid red;
border-radius: 82px 0px 0px 0px;
width: 200px;
height: 75px;
}
Here's the fiddle: http://jsfiddle.net/Xs2Mr/.
Hope this helps!

Answer 4

I think Kai did it correctly, but in case you don't want it to touch the top of the circle, here is the best I could do with your fixed height of the red box.
http://jsfiddle.net/P63VY/18/
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
}
.rounded {
position: absolute;
left: 20px;
top: 23px;
border: 1px solid red;
border-radius: 150px / 160px 0px 0px 0px;
width: 200px;
height: 50px;
}

Answer 5

try if any issue comment it
<style>
.circle {
border: 7px solid black;
border-radius: 82px 82px 82px 82px;
height: 150px;
margin-left: 1px;
width: 150px;
}
.rounded {
border: 1px solid red;
border-radius: 60px 0 0 0;
font-size: 30px;
height: 50px;
left: 20px;
line-height: 46px;
padding-left: 20px;
position: absolute;
top: 22px;
font-size:30px;
}
</style>
<div class="circle">
</div>
<div class="rounded">blah blah blah blah blah blah</div>

Answer 6

Got it working, but with a trick.
Here is the answer:
http://jsfiddle.net/Beck/P63VY/64/
Thanks for trying though ppl.
64 updates lol :D
<div id="rounded1" class="rounded"></div>
<div class="circle">
<div class="rounded"></div>
</div>
<div id="text">blah blah blah blah blah blah</div>
.circle {
width:150px;
height:150px;
border-radius:82px;
border:7px solid black;
overflow:hidden;
}
.rounded {
position: relative;
top: 23px;
left:-3px;
background:red;
width: 400px;
height: 50px;
}
#rounded1 {
position:absolute;
top:38px;
left:40px;
background:red;
}
#text {
position:absolute;
top:38px;
line-height:50px;
padding-left:20px;
font-size:30px;
color:white;
}