<style>
    div.square {
        width: 80px;
        height: 80px;
        margin: 10px;
        display: inline-block;
        background: lightyellow;
        border: 10px solid green;
    }
    .rounded div.square {
        -webkit-border-radius: 20px;
    }
</style>
<div>
    <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px 15px inset;"></div>
    <div class="square" style="-webkit-box-shadow: -15px 15px 0 5px rgba(0, 0, 0, 0.2) inset;"></div>
    <div class="square" style="-webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 15px -15px 0 -10px;"></div>
    <div class="square" style="-webkit-box-shadow: inset -15px -15px 5px rgba(0, 0, 0, 0.2);"></div>
    <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) inset -15px -15px 5px;"></div>
</div>
<div class="rounded">
    <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px 15px inset;"></div>
    <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px 15px 0 5px inset;"></div>
    <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 15px -15px 0 -10px inset;"></div>
    <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15px 5px inset;"></div>
    <div class="square" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) -15px -15px inset, rgba(0, 0, 127, 0.6) 5px 5px 5px inset; border-style: dashed;"></div>
</div>
<div style="width: 600px; text-align: center;">
    <span style="
        padding: 0 15px;
        font-size: 72px;
        background-color: lightyellow;
        -webkit-border-radius: 10px;
        border: 5px solid green;
        line-height: 1.5;
        -webkit-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.2) inset;
    ">
        This sentence is too long to fit on a single line.
    </span>
</div>