HTML CSS examples for CSS Widget:Shape
Draw dashed border inside the custom shape using HTML & CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w. j a v a2 s .co m--> font:14px Verdana; } h3 { height:100px; background:Chartreuse; border-radius:51px 11px 11px 51px; display:flex; margin-top:51px; position:relative; line-height:100px; color:yellow; font-size:14px; font-weight:normal; } h3 i { width:131px; height:131px; transform:translateY(-16px); background:blue; border-radius:51%; position:relative; margin-right:21px; } h3:before { content:""; position:absolute; border:2px dashed pink; top:6px; bottom:6px; left:106px; z-index:11; right:3px; border-radius:0px; border-left:0; } h3 i:before { content:""; position:absolute; top:6px; bottom:6px; left:6px; right:6px; border:2px dashed OrangeRed; border-radius:51%; border-right:2px solid grey; } </style> </head> <body> <h3> <i></i>Lorem </h3> </body> </html>