CSS 角を丸くする

角を丸くする方法

共通 html

<div class="list">
    <ul>
        <li><a href="#">ナビ1</a></li>
        <li><a href="#">ナビ2</a></li>
        <li><a href="#">ナビ3</a></li>
    </ul>
</div>

基本 CSS

.list2 ul {
    margin: 0; /* 余分なマージンを消す */
    padding: 0;/* 余分なパディングを消す */
    text-align: center;
}

.list2 ul li {
    display: inline-block;
    background-color: #f00;
    margin: 10px;   /* 隙間が必要な場合はmarginを設定 */
    padding: 10px 0;/* liの高さを変えたい場合はこのpaddingを設定 */
}

.list2 ul li a {
    display: block;
    padding: 0 50px;/* ここで幅全体にリンクをつける事が出来る */
}

.list2 ul li a:hover {
    background-color: #ccc;
}

基本 SCSS

.list2 ul {
    margin: 0; /* 余分なマージンを消す */
    padding: 0;/* 余分なパディングを消す */
    text-align: center;

    li {
        display: inline-block;
        background-color: #f00;
        margin: 10px;   /* 隙間が必要な場合はmarginを設定 */
        padding: 10px 0;/* liの高さを変えたい場合はこのpaddingを設定 */

        a {
            display: block;
            padding: 0 50px;/* ここで幅全体にリンクをつける事が出来る */
            &:hover {
                background-color: #ccc;
            }
        }
    }
}

border-radius

Ex.1)四角を丸くする

.list2 ul li {
    display: inline-block;
    background-color: #f00;
    padding: 10px;
    margin: 10px;
    /* ここで丸みを決める */
    -moz-border-radius: 10px;    /* 古いFirefox */
    -webkit-border-radius: 10px; /* 古いSafari,Chrome */
    border-radius: 10px;         /* CSS3 */
}

/* もしhover箇所も丸くする場合 */
.list2 ul li a:hover {
    background-color: #ccc;
    -moz-border-radius: 10px;    /* 古いFirefox */
    -webkit-border-radius: 10px; /* 古いSafari,Chrome */
    border-radius: 10px;         /* CSS3 */
}

.list2 ul li {
    display: inline-block;
    background-color: #f00;
    padding: 10px;
    margin: 10px;
    /* ここで丸みを決める */
    -moz-border-radius: 10px;    /* 古いFirefox */
    -webkit-border-radius: 10px; /* 古いSafari,Chrome */
    border-radius: 10px;         /* CSS3 */

    /* もしhover箇所も丸くする場合 */
    &:hover {
        background-color: #ccc;
        -moz-border-radius: 10px;    /* 古いFirefox */
        -webkit-border-radius: 10px; /* 古いSafari,Chrome */
        border-radius: 10px;         /* CSS3 */
    }
}

Ex.2)上だけを丸くする

.list2 ul li {
    display: inline-block;
    background-color: #f00;
    padding: 10px;
    margin: 10px;
    /* 左から、左上・右上・右下・左下 */
    -moz-border-radius: 10px 10px 0 0;   /* 古いFirefox */
    -webkit-border-radius: 10px 10px 0 0;/* 古いSafari,Chrome */
    border-radius: 10px 10px 0 0;        /* CSS3 */
}

例えば下だけ丸くする場合は、
border-radius: 0 0 10px 10px;
で指定すればいい。