Nazariy Kalinchuk Nazariy Kalinchuk - 11 days ago 7
CSS Question

How to make rounded bottom of header?

How to make rounded header like this?

Rounded Header

Answer

There are many ways to do it, he's a simple way. Have you got any HTML/CSS experience or are you new to this?

body {
  margin: 0;
  background: #8e8e8e;
}
.header {
  height: 50px;
  width: 100%;
  line-height: 50px;
  text-align: center;
  color: #fff;
}
.content {
  background: #fff;
  height: calc(100vh - 110px);
  border-top-right-radius: 50% 60px;
  border-top-left-radius: 50% 60px;
  padding: 60px 20px 0 20px;
}
<div class="header">Header</div>
<div class="content">Content</div>