ホームページ作成にあたって ”CSSだけで角丸四角を表示する方法”

ホームページ作成にあたって、

以外に使えたのが ”CSSだけで角丸四角を表示する方法” です。

表示結果

<css>

h1{
  width:100px;
  background-color:#99FFCC;
  border-top-left-radius: 10px;     /* 左上 */
  border-top-right-radius: 10px;    /* 右上 */
  border-bottom-left-radius: 10px; /*  左下 */
  border-bottom-right-radius: 10px; /* 右下 */

  /*　 border-radius:10px 10px 10px 10px;　でも同じ結果になります。 */
}

このとき、横幅（width）を設定しないと横幅いっぱいになるのでご注意です。

pxを調節すると、丸もかけます。