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/

Can you try to explain in more detail what you mean by "How can I remove 25% borders from circle?" Maybe Google Translate can help :) — Yahel, Dec 01 '10 at 19:35
I see you are using the corrected code given in your other CSS-related question here: http://stackoverflow.com/questions/4313958/css3-rounded-corner-for-input-element-without-js-images/4314024#4314024. You still need to accept an answer. — Evan Mulawski, Dec 01 '10 at 19:42
Up vote for the picture on Flickr :) "A picture paints a thousand words" — Rob Kielty, Apr 04 '12 at 00:55

score 7 · Accepted Answer · answered Dec 01 '10 at 19:45

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);

CSS Circle border

1 Answers1