How to achieve this oval layout with CSS

Tags: html,css,css3

Problem :

How to achieve this layout with CSS?

---

Solution :

You can try this: https://jsfiddle.net/dqhx5cf5/

HTML:

<div class="rectangle"><div class="circle"></div></div>

CSS:

.rectangle{
   background-color: darkblue;
   width: 300px;
   height: 500px;
   overflow:hidden;
}

.circle{
   border-radius: 50%;
   width: 600px;
   height: 600px;
   background-color: #ddd;
   position:relative;
   left: -150px;
   top: 100px;
   border: 2px dashed darkblue;
   box-shadow: 0 0 0px 5px #ddd;
}

BUT with Firefox the curved line does not appear dashed because is not compatible with mozilla, but if you check it from IE and Chrome it works as well.