<h2>CSS3 Tests</h2> <section>Test for section with border radius. Note we have to put in padding so that the large 40px top-left border radius does not overlap the text.<br>Also ridge border needs 6px or more to look well.<br>Box shadow and Border radius code couresty of CSSmatic.com generators.</section> <hr> <div style='line-height:15px;'><b>Div box shadow</b> <br>Also note groove borders <br>1)dont work well with span <br>2) need at least 6px size of groove or greater to show up well.</div> <span>Span Boxshadow - note the the overlap of the shadow</span> <div style="margin-top:12px;">Div Boxshadow 2 corrected for overlap of box shadow</div>
section { width:400px; height:110px; padding:12px; border-radius: 40px 16px 16px 16px; -moz-border-radius: 40px 16px 16px 16px; -webkit-border-radius: 40px 16px 16px 16px; border: 9px ridge #f5c9f5; } div, span { -webkit-box-shadow: 6px 6px 8px 0px black; -moz-box-shadow: 6px 6px 8px 0px black; box-shadow: 6px 6px 8px 0px black; border: 6px groove blue; }