@ CSS

border-radius プロパティ

border-radius は四角形の四つ角の半径を一括指定できるショートハンドプロパティです。

format

border-radius: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius;

border-radius プロパティの parameta は下記のとおりです。

  • border-top-left-radius:左上半径
  • border-top-right-radius:右上半径
  • border-bottom-right-radius:右下半径
  • border-bottom-left-radius:右下半径

水平方向と垂直方向の半径のセットは、スラッシュ( / )で区切ります。

example

border-radius: 80px 25px 100px 50px / 80px 25px 50px 50px;

border-radius の使用例を以下に示します。

property_border_radius

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
.border-radius {
  font-size: 200%;
  width: 300px;
  height: 200px;
  border: solid 10px #eee;
  border-radius: 80px 25px 100px 50px / 80px 25px 50px 50px;
} 
</style>
</head>

<body>
  <div class="border-radius"> </div> 
</body>

</html>

demo