html5 & css3メモ divタグの角を丸めてみる

プログラミング

数年前？十数年前？は<table>タグでレイアウトの枠を作って、角の丸い画像を四隅に配置してたんだけど…コーディングすりゃ角が丸くなる…簡単になったもんだ。

htmlページはこんな感じ。

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            div {
                background-color:lightgray;
                border-radius:10px; /* 角を丸くする */
                padding:5px;
            }
        </style>
    </head>
    <body>
        <div>radius:5px</div>
    </body>
</html>

やるこた、こんだけ。

  1. cssで角を丸くしたいタグ、クラス、ID（今回は<div>タグ）のスタイルにborder-radiusのプロパティと値を書く

で、Firefoxで確認してみたらこんな感じ。

17632_02

ま、メモってことで。