■概要
border-radius俗世は、要素の角を丸くします。pxと%を使うことができ、border属性がなくても使えます。
4つの角を別の値で設定することもできます。margin、padding属性と似たように4つの値をスペース区切りで指定すると左上から時計回りで設定することができます。
■使用方法
#box{
border-radius: 5px;
border-radius: 1px 2px 3px 4px;
}
■例
<html>
<head>
<style>
.box{
width: 150px;
height: 80px;
background-color: #039BE5;
border: 2px solid #01579B;
margin-bottom: 20px;
}
#box1{
border-radius: 20px;
}
#box2{
width: 80px;
border-radius: 50%;
}
#box3{
border-radius: 20px 0 10px 50px;
}
</style>
</head>
<body>
<div id=”box1″ class=”box”></div>
<div id=”box2″ class=”box”></div>
<div id=”box3″ class=”box”></div>
</body>
</html>
出力結果
当サイトは広告を含めています。広告のクリックによる収益は全て当サイトの管理、維持、コンテンツ製作に使われます。
