CODEWITHSUNDEEP
cssbordergeometry
Isis
Isis

Reputation: 4666

CSS Circle border

<!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/

Upvotes: 3

Views: 13392

Answers (1)

casablanca
casablanca

Reputation: 70701

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

Upvotes: 7

Related Questions