Create circle and oval in CSS

CSS circle and oval can be created using border-radius on a div. For circle the horizontal and vertical radius of each corner is same, whereas for oval these should be different.

CSS circle

<style>
.circle {
  background-color: lightgreen;
  width: 100px; height: 100px;
  border-radius: 50px;
}
</style>

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

CSS oval

<style>
.oval {
  background-color: lightgreen;
  width: 200px; height: 100px;
  border-radius: 100px/50px;
}
</style>

<div class="oval"></div>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments