Изменение границы круга CSS

Question

Это довольно объяснительно в кодефене. Часть, которая квадратная, мне хотелось бы удалить, я попробовал прозрачность и другие вещи, но я не мог заставить ее работать.

Как вы можете отрегулировать угол окружности или скопировать определенный фрагмент? Мой текущий код CSS это

.circle { 
    -moz-border-radius: 50px/50px; 
    -webkit-border-radius: 50px 50px; 
    border-radius: 90px 0px 90px 90px; 
    border: solid 25px#396bb3; 
    width:50px; 
    height:50px; 
    } 

Codepen Demo

Answer 1

DEMO: http://jsfiddle.net/LsC7b/

.circle { 
    -moz-border-radius: 90px; 
    -webkit-border-radius: 90px; 
    border-radius: 90px; 
    border: solid 25px#396bb3; 
    width:50px; 
    height:50px; 
    border-top-color:transparent; 

    -ms-transform: rotate(45deg); /* IE 9 */ 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Answer 2

Равный радиус границы со всех сторон должны

border-radius: 90px 90px 90px 90px; 

Демо: http://codepen.io/anon/pen/iohKA

Update:

border-top-color: #fff; 
border-right-color: #fff; 
transform:rotate(45deg); 
-moz-transform:rotate(45deg); /* IE 9 */ 
-webkit-transform:rotate(45deg); 

Демо: http://codepen.io/anon/pen/BjhuF