タブのボタンを作る

CSSでタブのような物を作るには、以下のように「border-radius」プロパティを指定します。

プロパティ	内容
border-radius	全体の角の大きさ設定
border-top-right-radius	右上の角の大きさ設定
border-top-left-radius	左上の角の大きさ設定
border-bottom-right-radius	右下の角の大きさ設定
border-bottom-left-radius	左下の角の大きさ設定

---

お店
商品
アクセス

---

<style type="text/css">
.tab {
    font-size:20px;
    border-top-left-radius:15px;
    border-top-right-radius:20px;
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    border:4px solid #6666FF;
}
.tab:hover {
    background-color:#CCCCFF;
    border:4px solid #FFCCCC;
}
</style>
<a class="tab" >お店</a>
<a class="tab">商品</a>
<a class="tab">アクセス</a>