端くれプログラマの備忘録 CSS [CSS] 基本メモ: 角丸の指定

[CSS] 基本メモ: 角丸の指定

2015年1月30日| @84kure| 10:22 PM

Categories:

CSS

ボックスの角を丸めることができる。

サンプル

<style>
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 30px;
    background-color: orange;
    border: 2px solid red;
    color: red;
}
</style>

<style>
#test1 { border-radius: 10px; }
</style>
<div id="test1">test1</div>

<style>
#test2 { border-radius: 10px 20px 30px 40px; }
</style>
<div id="test2">test2</div>

<style>
#test3 { border-top-right-radius: 50px; }
</style>
<div id="test3">test3</div>

<style>
#test4 { border-radius: 50%; }
</style>
<div id="test4">test4</div>

<style>
#test5 {
    border-radius: 50%;
    background-image: url("sample.jpg");
}
</style>
<div id="test5">test5</div>

参考サイト

border-radius－CSS3リファレンス
http://www.htmq.com/css3/border-radius.shtml