Rotating picture and border not evenly spaced

Sorry for the criptic title but let me try and explain. Ultimatly i wish to have pictures and a border around each one in a diagonal direction across the screen. The picture and border will have rounded corners. This has been difficult but i think i am nearly there.

The difficulty i am having is to place a movieClip (picture) over another movieClip (border) but evenly spaced. Now this is easy enough when both movieClip’s are horizontal or vertical as simple addition/subtraction of x,y coordinates are calculated.
What i wish to have is at 45 degree (or at any) angle!!!

so, to make this simple I have been playing with just the code to rotate two movieClips…

var theta:Number = 45;
movieClip1_mc.width =100;
movieClip1_mc.height =100;

movieClip2_mc.width =80;
movieClip2_mc.height =80;

this.onEnterFrame = function() {
theta++;

var rad = theta*Math.PI/180;
movieClip1_mc._rotation = theta;
movieClip1_mc._x = Math.cos(rad)+275;
movieClip1_mc._y = Math.sin(rad)+200;

movieClip2_mc._rotation = theta;
movieClip2_mc._x = Math.cos(rad)*10+275;
movieClip2_mc._y = Math.sin(rad)*10+200;

};

For the life of me I have tried many variations to move the movieClip2 but I just get unequal spacing.

Please could anyone shine some light onto this???
Many thanks
Mike :o)