rcastellanosm rcastellanosm - 1 year ago 353
CSS Question

Curved DIV Edges in CSS

I'm trying to make these image corners / edges in css but with no result:

enter image description here

How can I achieve this in CSS?

Here's my attempt, but I can't achieve the exact shape that's in the image.

div {
background-color: black;
width: 500px;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;


Answer Source
  1. create a container div
    • css: overflow: hidden;
  2. create 3 divs inside the container div

    • one green rectangle (lid) with
      border-radius: 50%; z-index: 2; box-shadow: 0 0 10px black;
    • one left rectangle
    • one right rectangle
    • for all rectangles use: position: relative; and reposition them.
      with left: [X]px, top: -[Y]px, float: left and float: right.
  3. Use dynamic measurements for sizing and positioning,
    so you're layout works responsively : ex: all based on vw.

    p.s.: I have a fiddle, but it would be too easy.
    Try it yourself. Let me know when you get stuck.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download