by shigemk2

当面は技術的なことしか書かない

border-radius1つだけ指定

CSS

border-radius－CSS3リファレンス
border-radiusって最大8つの値を指定できるけども、ひとつだけ指定することもできる。

下の画像を見てみると…
上はborder-radius: 6pxで、下はborder-radius: 20px 値が大きくなれば大きくなるほど、丸みを帯びていく。

ソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
    <style type="text/css">
      body { padding: 50px; width: 600px; height: 600px;}
      div.hoge1 { height: 250px; border: 5px solid #000; border-radius: 6px; margin-bottom: 100px;}
      div.hoge2 { height: 250px; border: 5px solid #000; border-radius: 20px; margin-bottom: 100px;}
    </style>
  </head>
<body>
  <div class="hoge1">
  </div>
  <div class="hoge2">
  </div>
</body>
</html>