HTML CSS examples for CSS Widget:Shape
create a half bordered circle
<html> <head> <title>counter box</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .chartBottom {<!--from w ww. ja v a 2 s . c o m--> width:120px; height:120px; border:1px solid #c45; border-bottom:1px solid transparent; border-radius: 60px; } .icon { position: relative; height: 40px; width: 60px; top: -30px; left: 30px; text-align: center; border: 1px solid green; } .wrapper { background-color: rgba(0,0,0,0.5); padding: 3px; width: 126px; } </style> </head> <body> <div class="wrapper"> <div class="chartBottom"></div> <div class="icon"> Icon </div> </div> </body> </html>