Html Question posted in
Some basic documentation can be found here.

How to add a concave border at bottom of an html element?

I am trying to build a clone of Netflix’s home page to hone my web desiging skills. Netflix’s home page has a concave border at the bottom of hero section. I have added a straight line border at the bottom of my netflix-clone home page. I want to make it a concave border mimicking the real Netflix home page. Here are the images of my desired outcome (real Netflix homepage) and so far achieved design (netflix clone homepage). Thanks in advance.real netflix home page with a concave border at the bottom of hero section my Netflix clone homepage with a straight line bottom border

I added a straight line border at the bottom of my hero section but I would like to add a concave border in its place at the bottom of my hero section instead.

Tags:

2

Answers


  1. 0

    Maybe Netflix can tell you：
    enter image description here

    .default-ltr-cache-1f97ztc {
        box-sizing: border-box;
        position: absolute;
        height: 100px;
        width: 100%;
        top: 0;
        margin: auto;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border: solid .25rem transparent;
        border-top-left-radius: 50% 100%;
        border-top-right-radius: 50% 100%;
        border-bottom: none;
        background: radial-gradient(50% 500% at 50% -420%, rgba(64, 97, 231, 0.4) 80%, rgba(0, 0, 0, 0.1) 100%), black;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }

    .default-ltr-cache-1f97ztc:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin-top: -.25rem;
        border-radius: inherit;
        background: linear-gradient(to right, rgba(33, 13, 22, 1) 16%, rgba(184, 40, 105, 1), rgba(229, 9, 20, 1), rgba(184, 40, 105, 1), rgba(33, 13, 22, 1) 84%);
    }

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>demo</title>
</head>
<body>

    <div class="default-ltr-cache-1f97ztc">
        
    </div>

</body>
</html>
    Login or Signup to reply.
  2. 0

    I put my efforts to create a concave top border. Now you can adjust it according to your wish.

    .top {
  padding: 10px;
  text-align: center;
}

.concave-border-container {
  background-color: gray;
  position: relative;
  border-top-left-radius: 700px 70px;
  border-top-right-radius: 700px 70px;
  padding: 10px;
  overflow: hidden;
}

.concave-border-container::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, red, pink);
  border-top-left-radius: 700px 70px;
  border-top-right-radius: 700px 70px;
}

.concave-border-container h1 {
  color: white;
  text-align: center;
  padding-top: 60px;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div class="top">
      <h1>Top</h1>
    </div>

    <div class="concave-border-container">
      <h1>Concave Border</h1>
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search