CSS Circle border

Question

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>1</title>
        <style type="text/css">
body{margin:100px;}
#x
{
    position:relative;
    width:300px;
    height:360px;
    background-color:#07284a;
    -moz-border-radius: 30px;
    -webkit-border-radius:30px;
    -khtml-border-radius:30px;
    border-radius:30px;
    border:1px solid #37629B;
}
#f
{
    background-color:#07284a;
    width:126px;
    height:126px;
    position:absolute;
    right:-63px;
    top:-63px;
    -moz-border-radius: 63px;
    -webkit-border-radius:63px;
    -khtml-border-radius:63px;
    border-radius:63px;
    border:1px solid red;
}
        </style>
    </head>
<body>
<div id="x">
    <div id="f"></div>
</div>

Inside the block "x" is shown red border of circle... How I can remove 25% borders from circle? Sorry for bad english

ADDED

http://www.flickr.com/photos/26325973@N02/5223999393/

Answer 1

I believe you want to remove the bottom-left quarter of the border so that it blends with the big rectangle. You can do that by removing the bottom border and rotating by 45 degrees so that the bottom portion becomes the bottom-left:

border-bottom-color: transparent;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);