How to Make a Curve on a Rectangle's Top in CSS? Only in Top Edge

How to make a curve on a rectangle's top in css? only in top edge

Here are DEMO

HTML:

<div id="gray">
    <div id="red"></div>
</div>

CSS:

#gray{

  height: 100%;
  background-color: #ccc;
  overflow: hidden;  
}

#red{

  width: 150%;
  height: 150%;
  background-color: #f00;
  border-radius: 100%;
  top: 50%;
  left: -25%;
  right: 0;
  position: relative;
}

How to Create rectangle with curve on top left and bottom left using css?

.rect {

  width: 150px;

  height: 150px;

  border-top-left-radius: 100%;

  background: #333;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

}

<div class="rect">

  Filters

</div>

Border of rectangle with curved side

Use a pseudo element with radial-gradient:

.box {

  width:200px;

  height:150px;

  background:red;

  border-radius:10px;

  position:relative;

  margin-top:50px;

}

.box:before {

  content:"";

  position:absolute;

  bottom:100%;

  left:0;

  right:0;

  height:50px; /* Same as margin*/

  background:radial-gradient(circle,red 49.5%,transparent 50%) top/150% 400%;

  

}

<div class="box">

</div>

Curve the lengths of a rectangle with CSS?

As the other answers, the best way to make your shape perfect is using SVG. However with css3 and the help of pseudolements after and before You may have close shapes.

This one is far from good as I've made the FIDDLE as a fast example but with time you may get better results:

div {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: green;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
div:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}
div:after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: -11px;
    width: 130px;
  height: 120px;
  background: green;
  border-radius: 20% / 150%;        
}

How to achieve curved top pointer

One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.

In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.

.caption {

  position: relative;

  width: 350px;

 margin-top: 40px;

}

.caption>.content {

  width: 100%;

  height: 100%;

  padding: 10px;

  box-sizing: border-box;

  border-radius: 30px;

  background-color: green;

  color: white;

  text-align: center;

}

.caption>.point {

  position: absolute;

  left: 50%;

  top: -30px;

  width: 30%;

  height: 30px;

  transform: translateX(-50%) translateZ(1px);

  overflow: hidden;

  background-color: green;

}

.caption>.point::before,

.caption>.point::after {

  content: '';

  display: block;

  width: 100%;

  height: 200%;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 100%;

  background-color: white;

}

.caption>.point::before {

  transform: translateX(-49%) translateY(-50%);

}

.caption>.point::after {

  transform: translateX(49%) translateY(-50%);

}

<div class="caption">

  <div class="point"></div>

  <div class="content">This is some text!</div>

</div>

Rectangle with curved sides

Please check updated code

.curv{

    width: 800px;

    margin: 0 auto;

    position: relative;

    padding-top: 100px;

    overflow: hidden;

}

.curv:before{

    background: #333;

    height: 200px;

    left: -20px;

    right: -20px;

    top: 10px;

    content: '';

    position: absolute;

    border-radius: 100% 100% 0 0;

}

.holder{

     height: 200px;

    background: #333;

    position: relative;

    z-index: 9999;

}

<div class="curv">

    <div class="holder"></div>

</div>

How can I make a curve border using CSS3?

I used before after to achieve this

div{

  width: 400px;

  height: 200px;

  background-color: #333;

  position: relative;

  overflow: hidden;

}

div:before {

    content: "";

    position: absolute;

    top: -10%;

    width: 100%;

    height: 50%;

    background-color: white;

    border-bottom-left-radius: 50%;

    border-bottom-right-radius: 50%;

}

div:after {

    content: "";

    position: absolute;

    width: 100%;

    bottom: -10%;

    height: 50%;

    background-color: white;

    border-top-left-radius: 50%;

    border-top-right-radius: 50%;

}

<div></div>

Draw a curve with css

You could use an asymmetrical border to make curves with CSS.

border-radius: 50%/100px 100px 0 0;

VIEW DEMO

.box {

  width: 500px; 

  height: 100px;  

  border: solid 5px #000;

  border-color: #000 transparent transparent transparent;

  border-radius: 50%/100px 100px 0 0;

}

<div class="box"></div>

---

Related Topics