Positioning elements along the visible border of a parent div - css

Question

I've not been able to find anything on this topic, oddly; I figured it'd be a pretty common issue!
What I've got is a parent div with a border-radius to make the div circular. Nested in that div, I've got several child divs that I would like:
Positioned directly on the visible circular borders (as opposed to the invisible square "border" that surrounds the div -- this jsFiddle hopefully will clarify what I'm trying to say here).
In addition, I'd like to be able to precisely position the child divs along different points of this border (so, something like "position childDiv1 at the 90deg position [or the 105deg position, 120deg, 135deg, etc.] of the circular parent div" instead of having to use top and left or assign absolute pixel values or something).
Still an amateur trying to figure out CSS positioning, so I'm not even sure if any of this is possible, haha. Looking forward to any input you guys can provide!

Answer 1

You can use css3 transform and transform-origin to achieve this
<div id="parent">
<div class="child" id="child1"></div>
<div class="child" id="child2"></div>
<div class="child" id="child3"></div>
<div class="child" id="child4"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}
.child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
left: 135px;
}
#child1{
transform: rotate(90deg);
transform-origin:50% 150px;
}
#child2{
transform: rotate(105deg);
transform-origin:50% 150px;
}
#child3{
transform: rotate(120deg);
transform-origin:50% 150px;
}
#child4{
transform: rotate(135deg);
transform-origin:50% 150px;
}
http://jsfiddle.net/zSdsg/20/

Answer 2

http://jsfiddle.net/zSdsg/15/
(updated to show that top:0 does not protrude the circle.)
Or http://jsfiddle.net/zSdsg/17/, which just looks a lot cooler :}
EDIT: I think I misunderstood your question. I will update or delete my answer depending on...my answer.

Answer 3

http://jsfiddle.net/zSdsg/14/
would something like this be what your looking for?
#parent {
position: relative;
width: 300px;
height: 300px;
border: 1px dotted #000;
border-radius: 150px;
}
#child {
position: absolute;
width: 30px;
height: 30px;
background-color: #666;
}
#child2 {
position: absolute;
top:35px;
left:40px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 150px;
}
​
<div id="parent">
<div id="child"></div>
<div id="child2"></div>
</div>​