CSS3 divなどで角を丸くする方法

Share on Facebook
Pocket
LINEで送る
Bookmark this on Google Bookmarks

簡単だけどよく使う。

4角を丸くする場合は以下のように指定する。

    border-radius: 10px;  

    /* Safari,Chrome */
    -webkit-border-radius: 10px;

    /* Firefox */
    -moz-border-radius: 10px;

以下のようにして適用してみる。

.main {
    border-radius: 10px;  

    /* Chrome Safari */
    -webkit-border-radius: 10px;

    /* Firefox */
    -moz-border-radius: 10px;

    padding: 10px;
    background-color: #EEEEEE;
}

スクリーンショット 2015-08-27 14.35.57

 

部分的に角を丸くする場合は、

    /* Chrome Safari 左上 */
    -webkit-border-top-left-radius: 10px;  
    /* Chrome Safari 右上 */
    -webkit-border-top-right-radius: 10px;  
    /* Chrome Safari 右下 */
    -webkit-border-bottom-right-radius: 10px;  
    /* Chrome Safari 左下 */
    -webkit-border-bottom-left-radius: 10px;  

    /* Firefox 左上 */
    -moz-border-radius-topleft: 10px;  
    /* Firefox 右上 */
    -moz-border-radius-topright: 10px;  
    /* Firefox 右下 */
    -moz-border-radius-bottomright: 10px;  
    /* Firefox 左下 */
    -moz-border-radius-bottomleft: 10px;

でできる。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です