CSS3 Tests for Box Shadow and Border radius

by Jacques Surveyer

HTML

<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>

CSS

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;
}