Nazariy Kalinchuk Nazariy Kalinchuk - 11 months ago 64
CSS Question

How to make rounded bottom of header?

How to make rounded header like this?

Rounded Header

Answer Source

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>