CODEWITHSUNDEEP
htmlcssborder
ports
ports

Reputation: 17

Semi-circle on the bottom side of a div?

I need a semi-circle for the bottom border of a div (not rounded corners), like this.

enter image description here

This is the div code:

#navlogo img {
position:fixed;
width: 180px;
height: 180px;
z-index: 2;
left:45%;
top:0;
background-color:#CCC;

Any help is greatly appreciated!

border-radius does the trick, sorry for not wording it better

Upvotes: 1

Views: 2454

Answers (2)

Sylver
Sylver

Reputation: 11

As far as I know, there are only few ways to include rounded shapes in a webpage:

  • border-radius (rounded corners)
  • images
  • SVG
  • Flash

Considering what you want to do, SVG and Flash are out of question, leaving only images and rounded corners to you. I don't know why you refuse to use border-radius because it works very well. You won't find anything that integrates better into a webpage.

Upvotes: 1

Sukrit
Sukrit

Reputation: 318

You'll need border-bottom-left-radius: 50% and border-bottom-right-radius: 50%;.

jsFiddle: https://jsfiddle.net/ufar4mrj/

Upvotes: 2

Related Questions