How to have bottom of header section curved?

Question

I know this question has been asked, but the way the design is implemented is not how I want it.

This is how I want the curved header to look

I've tried border radius left and right, but the edges are way too rounded.

Any ideas on how to accomplish this? EDIT: I know that I need border-radius, what I'm trying to say is I don't want the radius to look really rounded. I want it exactly to what I've linked to the picture. I don't understand the reason to downvote.

Can you provide more details on what you’ve tried and researched? — Sebastian Simon, Jan 01 '17 at 21:34
I've looked at some questions on stackoverflow and they all had similar responses of changing the border radius to 50%, like I said that's way too rounded. That's why I'm asking if there is a way to make it look like in the picture I've provided. — Jabran Shakil, Jan 01 '17 at 21:36
`border-radius: 0 0 50% 50%;` or something similar should be enough. — Sebastian Simon, Jan 01 '17 at 21:49

gavgrif · Accepted Answer · 2017-01-01T23:04:59.567

This is totally achievable with CSS - simply have a nested div - apply different sizing and colors to them and have the inner one bigger than the outer one but with a different overfow visibility. The following creates the curved arc at the bottom. You can play around with the styling to get the desired result.

It is still using the border-radius:50%, but because the div that the border radius is applied to is MUCH larger than displayed - the curved border is a more gentle arc.

.outer{
  width:500px;
  height:200px;
  background:white;
  position:relative;
  overflow:hidden
}

.inner{
  width:1000px;
  height:200px;
  background:#29465E;
  border-radius: 50%;
  position:absolute;
  left:-50%;
  top:-25%;
  overflow:visible
}

<div class="outer">
  <div class="inner"></div>
</div>

Okay, thank you. I'm going to try this out and I'll let you know the results. Appreciate it! — Jabran Shakil, Jan 01 '17 at 22:52
How do I apply this to the header? It works but the background image does not show. — Jabran Shakil, Jan 02 '17 at 00:55

score -1 · Answer 2 · answered Jan 01 '17 at 21:37

-1

That is not a css setting, it's just a background image.

answered Jan 01 '17 at 21:37

Serg Chernata

12,280
6
32
50

So you can't accomplish this with CSS? – Jabran Shakil Jan 01 '17 at 21:38
You could, but it's a little complicated. Check out these answers: http://stackoverflow.com/questions/8503636/transparent-half-circle-cut-out-of-a-div – Serg Chernata Jan 01 '17 at 21:41
Hmmm...that is complicated. Thank you for the replies. – Jabran Shakil Jan 01 '17 at 21:48
Firstly - this is a comment and not an answer - and since it is inbcorrect - definitely should not be marked as the correct answer. See my post below for a simple CSS only curved arc. – gavgrif Jan 01 '17 at 22:04
@gavgrif he asked about a specific screenshot. I'm very confident that the graphic was not created via css but is in fact an image. – Serg Chernata Jan 01 '17 at 22:06
@ Serg Chernata - still only a comment – gavgrif Jan 01 '17 at 22:06
@gavgrif that's what you think. I think using a nested div for a minor css effect is unnecessary and non-semantic, but I'm not all over your post about it. – Serg Chernata Jan 01 '17 at 22:08

How to have bottom of header section curved?

2 Answers2