Rosette

HTML

<div class="rosette">
	<div class="l_hole"></div>
	<div class="bolt"></div>
	<div class="r_hole"></div>
</div>

CSS

.rosette {
	margin: 0 auto;
	width: 300px; height: 300px;
	position: relative;
	background: -webkit-linear-gradient(top, #efe8e7, #ccbfbd);
	background:    -moz-linear-gradient(top, #efe8e7, #ccbfbd);
	background:     -ms-linear-gradient(top, #efe8e7, #ccbfbd);
	background:      -o-linear-gradient(top, #efe8e7, #ccbfbd);
	background:         linear-gradient(top, #efe8e7, #ccbfbd);
	-webkit-border-radius: 40px;
	   -moz-border-radius: 40px;
	        border-radius: 40px;
	-webkit-box-shadow: inset 0 3px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(0,0,0,.09), 0 3px 10px rgba(0,0,0,.5);
	   -moz-box-shadow: inset 0 3px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(0,0,0,.09), 0 3px 10px rgba(0,0,0,.5);
	        box-shadow: inset 0 3px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(0,0,0,.09), 0 3px 10px rgba(0,0,0,.5);
}
.rosette:after {
	content: '';
	width: 60%;
	height: 60%;
	position: absolute;
	left: 20%;
	top:20%;
	display: block;
	-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 1px 1px rgba(255,255,255,.4), inset 0 0 1px 2px rgba(255,255,255,.4);
	   -moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 1px 1px rgba(255,255,255,.4), inset 0 0 1px 2px rgba(255,255,255,.4);
	        box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 1px 1px rgba(255,255,255,.4), inset 0 0 1px 2px rgba(255,255,255,.4);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
}
.rosette:before {
	content: '';
	width: 46%;
	height: 46%;
	position: absolute;
	left: 27%;
	top:27%;
	display: block;
	-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 5px 20px rgba(105,79,77,.6), inset 0 20px 50px rgba(105,79,77,.4), inset 0 10px 30px rgba(105,79,77,.3), inset 0 5px 15px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.5), inset 0 1px 1px rgba(0,0,0,.6);
	   -moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 5px 20px rgba(105,79,77,.6), inset 0 20px 50px rgba(105,79,77,.4), inset 0 10px 30px rgba(105,79,77,.3), inset 0 5px 15px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.5), inset 0 1px 1px rgba(0,0,0,.6);
	        box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 5px 20px rgba(105,79,77,.6), inset 0 20px 50px rgba(105,79,77,.4), inset 0 10px 30px rgba(105,79,77,.3), inset 0 5px 15px rgba(0,0,0,.3), 0 1px 1px rgba(255,255,255,.5), inset 0 1px 1px rgba(0,0,0,.6);
	-webkit-border-radius: 100%;
	   -moz-border-radius: 100%;
	        border-radius: 100%;
}

/* Two rosette wholes */
.l_hole, .r_hole {
	width: 7%; height: 7%;
	background: rgba(0,0,0,1);
	position: absolute;
	top: 46.5%;
	z-index:10;
	background: -webkit-linear-gradient(top, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background:    -moz-linear-gradient(top, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background:     -ms-linear-gradient(top, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background:      -o-linear-gradient(top, rgba(0,0,0,.4), rgba(255,255,255,.4));
	background:         linear-gradient(top, rgba(0,0,0,.4), rgba(255,255,255,.4));
	-webkit-border-radius: 100%;
	   -moz-border-radius: 100%;
	        border-radius: 100%;
}
.l_hole { left: 36%; }
.r_hole { right: 36%; }
.l_hole:before, .r_hole:before {
	content: '';
	width: 80%;
	height: 80%;
	position: absolute;
	left: 10%;
	top: 10%;
	z-index:9;
	background: #000;
	-webkit-border-radius: 100%;
	   -moz-border-radius: 100%;
	        border-radius: 100%;
}

/* Bolt in the middle */
.bolt {
	position: absolute;
	width: 8%;
	height: 8%;
	left: 46%;
	top: 46%;
	background: rgba(255,255,255,0.7);
	-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -7px 10px rgba(0,0,0,.6), 0 1px 1px rgba(255,255,255,.6);
	   -moz-box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -7px 10px rgba(0,0,0,.6), 0 1px 1px rgba(255,255,255,.6);
	        box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 -7px 10px rgba(0,0,0,.6), 0 1px 1px rgba(255,255,255,.6);
	-webkit-border-radius: 100%;
	   -moz-border-radius: 100%;
	        border-radius: 100%;
}
.bolt:after, .bolt:before {
	content: '';
	width: 2px;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	background: rgba(0,0,0,.7);	
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.7);
	   -moz-box-shadow: 0 1px 0 rgba(255,255,255,.7);
	        box-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.bolt:after {
	width: 10px;
	margin-left: -5px;
	margin-top: -1px;
}
.bolt:before {
	height: 10px;
	margin-top: -5px;
	margin-left: -1px;
	z-index: 10;
}

PS. Sorry for -ms prefixes, I put them because I have friends in Microsoft :)