Cocoonを自分好みに〜囲み枠を付ける

テーブルのボーダーに色を付けていたが、ただの四角で何とも味気ない。
角に丸みを付け、左上にタイトルを表示したい。。。っということで、｛ style.css ｝に以下を書き込みます。

/* 囲み枠角丸 */
.waku{
    position: relative;
    padding:20px 25px 10px;
    border-radius:15px / 15px; /* 四隅 */
}

.waku .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 40px;
    padding: 0 10px;
    line-height: 1;
    font-size: 18px;
    background: #ffffff;
}

.waku p {
    margin: 0; 
    padding: 0;
}

次に本文のHTMLを <div class=”waku”>　〜　</div> で囲みます。

<!– wp:tadv/classic-paragraph –> <div class=”waku” style=”margin-top: 80px; border: 1px solid #66cccc;”><span class=”box-title” style=”text-shadow: #00cccc 0px 0px 15px;”>お気に入りフォト</span> <table style=”width: 100%; border-collapse: collapse; border-style: hidden; margin-bottom: 0; background-color: #ffffff;”>
ー省略ー
</span></a></div>

汎用性を考え線の種類と色はcssで指定せず、HTMLのstyle〈 border: 1px solid #66cccc; 〉で指定しています。結果は以下の通りで、満足度120%です。

応用として四隅のアール以外に・・・
左上と右下にアールを付ける場合：border-radius:15px 0px 15px 0px / 15px 0px 15px 0px;
左下と右上にアールを付ける場合：border-radius:0px 15px 0px 15px / 0px 15px 0px 15px;
・・・とします。
また、アールの大きさは15pxを任意に変更します。

「【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30」を参考にさせていただきました。