CSS3の角丸を使ってキーボードのキーを表現してみた

追記(2012/06/01):border-radiusについてはベンダープレフィックス(9, 10行目の記述)は必要なくなりました。

ショートカットキーとかを表示させる時に画像を用意するのは面倒なのでCSS3の角丸と
昔ながらのborder-styleを使ってキーボードのキーを表現してみた。

例↓
Windows 7ではWin+数字でタスクバーにあるソフトを起動できます。

と、こんな感じで表示することができます。
border-style: outset;は古臭いHPの香りがしますが、
角丸にすると本当にキーっぽくて良い感じです。

サンプルコードはコチラ。

span.key {
    border: 5px #eee outset;
    color: black;
    margin: 5px;
    padding: 5px 10px;
    line-height: 2.5em;
    background-color: #eee;
    border-radius: 10px;        /* CSS3草案 */
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 10px;   /* Firefox用 */
}