Smiley face in CSS

by kalar su

HTML

<div class="smiley">
  <div class="left-eye eye">&nbsp;</div>
  <div class="right-eye eye">&nbsp;</div>
  <div class="mouth">&nbsp;</div>
</div>

CSS

.smiley {
	height: 60px;
	width: 60px;
	position: relative;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
}
.smiley .eye {
	height: 6px;
	width: 6px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	position: absolute;
  background-color: #CE5308;
}
.left-eye {
	top: 17px;
  left: 15px;
}
.right-eye {
	top: 17px;
  right: 15px;
}
.mouth {
	position: absolute;
  -webkit-border-bottom-right-radius: 19px;
	-webkit-border-bottom-left-radius: 19px;
	-moz-border-radius-bottomright: 19px;
	-moz-border-radius-bottomleft: 19px;
	border-bottom-right-radius: 19px;
	border-bottom-left-radius: 19px;
  height: 7px;
  width: 15px;
  left: 23px;
  top: 30px;
	background-color: #CE5308;
}

.smiley {
  border: 4px solid #CE5308;
}