0

I know how to use border-(bottom|top)-(left|right)-radius: XX; is there any way to create a curve that changes direction halfway through?

Salman A
  • 262,204
  • 82
  • 430
  • 521
Brian Karl
  • 1
  • 2
  • 1
    You should draw it in Paint and attach the image so your intention is clear. – Mark Wade Dec 04 '14 at 04:38
  • have a look at http://stackoverflow.com/questions/11313593/css3-double-rounded-border-is-it-possible-without-2-divs – Mazzu Dec 04 '14 at 05:06

1 Answers1

0

What about overlaying one <div> on top of another like this:

enter image description here

<div class="outer">
    <div class="inner-bottom"></div>
    <div class="inner-top"></div>
</div>

CSS:

div.outer {
    position: relative;
}

div.inner-top {
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: #ABC;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

div.inner-bottom {
    position: absolute;
    width: 200px;
    height: 80px;
    top: 10px;
    background-color: #ABC;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

Fiddle

Mark Wade
  • 517
  • 1
  • 4
  • 15