制作実績お見積フォームHTMLWordPressEC累計コーディング数:14698ページホーム>Web制作>CSS3のborder-radiusを使って要素の輪郭を角丸にする方法CSS3のborder-radiusを使って要素の輪郭を角丸にする方法Web制作2016年07月15日CSS3のプロパティについて解説する連載です。今回は角丸を指定するborder-radiusの使い方について解説します。border-radiusの指定方法border-radiusを使うと、CSS3だけで要素の輪郭を角丸にできます。border-radiusは下のように指定します。左下;要素の左上から順番に、時計回りに値(pxやem、%)を指定していきます。border-radiusで指定した値が半径となり、角丸が表現されます。角丸はボーダーの外側に適用されるので注意しましょう。水平方向と垂直方向で値を変えたい場合は、半角スラッシュを使って下のように指定します。垂直方向)水平方向と垂直方向で値を変えると、角丸を楕円で表現することも可能です。border-radiusの具体例それではborder-radiusの具体例について見ていきましょう。25px;全て同じ値を指定した場合、上のように均一な角丸で表現することができます。25px;四隅の角丸を異なる値で指定する場合です。左上から順番に、時計回りに指定すればOKです。20px;水平方向と垂直方向を別々に指定すると、角丸が楕円で表現できます。順に指定していきます。0;この場合でも、四隅を別々に指定することができます。先ほどと同じように、左上から時計回りに指定していけばOKです。あとがきborder-radiusの指定方法について解説しました。従来は画像を使っていた場面も多いかと思いますが、border-radiusを使うとCSS3だけで角丸が表現できます。活用していってください。今すぐ無料で見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。今すぐ無料でお見積もりを依頼する「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。