I have been searching the web for the past 2 hours trying to find how to achieve this result:
But I don't want to use images. I was trying to use the :after selector to achieve that result.
Is it possible.
I'm so sorry if this has been asked 200x , but I couldn't find it. I swear that I searched.
You're correct in using the :after pseudo-class. My assumption is that you possibly forgot to specify the content: '' attribute.
So first, you're going to want to create a block and position it at the bottom of your header:
header { position: relative; } header:after { content: ''; display: block; height: 44px; margin-left: -22px; position: absolute; left: 50%; bottom: -22px; // Pull it out to half of its size for the semi-circle look width: 44px; } Then make it circular using border-radius:
-webkit-border-radius: 44px; -moz-border-radius: 44px; border-radius: 44px; Final code:
header:after { content: ''; display: block; height: 44px; margin-left: -22px; position: absolute; left: 50%; bottom: -22px; // Pull it out to half of its size for the semi-circle look width: 44px; -webkit-border-radius: 44px; -moz-border-radius: 44px; border-radius: 44px; } 
To make simple circle in HTML, make a square div, apply a border-radius of 50% and you'll have a circle.
<div class="circle"></div> And in your CSS :
.circle{ width: 200px; height: 200px; border-radius: 50%; } Fiddle : http://jsfiddle.net/uw885d84/
Then, to place it, there are many ways, a simple one is to set your parent as position: relative and use absolute (position: absolute) positionning on your "circle" to place it at the center.
Edit Josh Burgess' answer shows a good way to position it.
We're going to use border-radius property to achieve this with pseudo-elements.
Basically, if you round the div to at least 50% of its height and width, you get a circle.
Then, we position it absolutely at the bottom center of the header and voila.
header { position: relative; } header:after { content: ''; border-radius: 40px; height: 80px; width: 80px; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%); background-color: blue; } Alternatively, if you're having overlap issues, this will work as well:
header:after { height:40px; width:80px; border-radius: 0 0 90px 90px; background:blue; top: 100%; left: 50%; transform: translateX(-50%); } and will generate a half circle (downwards facing) at the bottom of your header.
