HTML CSS examples for CSS Widget:Border
Adding radius in center of div
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from www. jav a 2s .c o m--> margin:0 0; } .zone-wrapper { background:url('http://www.java2s.com/style/demo/Google-Chrome.png') repeat scroll 0 0 Chartreuse; height:181px; z-index:0; } .content { top:-91px; position:relative; height:801px; background-color:yellow; border-top-left-radius:4001px 151px; border-top-right-radius:4001px 151px; z-index:3; } .seperator { height:51px; background-color:blue; border-top-left-radius:4001px 151px; border-top-right-radius:4001px 151px; top:-48px; width:100%; position:relative; z-index:2; } </style> </head> <body> <div id="zone-user-wrapper" class="zone-wrapper"></div> <div class="seperator"></div> <div class="content"></div> </body> </html>