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
– Yahel, Commented Dec 1, 2010 at 19:35
I see you are using the corrected code given in your other CSS-related question here: stackoverflow.com/questions/4313958/…. You still need to accept an answer. — Evan Mulawski
– Evan Mulawski, Commented Dec 1, 2010 at 19:42
Up vote for the picture on Flickr :) "A picture paints a thousand words" — Rob Kielty
– Rob Kielty, Commented Apr 4, 2012 at 0:55

casablanca · Accepted Answer · 2010-12-01 19:45:04Z

7

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

answered Dec 1, 2010 at 19:45

casablanca

70.9k8 gold badges139 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Circle border

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related