【CSS Modules】border-top-left-radiusプロパティの使い方

border-top-left-radiusプロパティは、ウェブページ上の要素の左上隅の角を丸めるための半径情報を保持するプロパティです。このプロパティを使用することで、直角な角を滑らかな曲線へと視覚的に変化させることができます。

値には、pxやem、remなどの単位を持つ長さ、またはパーセンテージを指定します。

値を一つだけ指定した場合、その値が水平方向と垂直方向の両方の角丸の半径として適用されます。これにより、要素の左上隅に均等な丸みが適用され、正円の一部のような形状になります。

一方、値を二つ指定した場合は、最初の値が水平方向の半径、二番目の値が垂直方向の半径として適用されます。この設定により、楕円の一部のような、より柔軟で自由な角丸の形状を表現することが可能です。例えば、横に長い楕円や縦に長い楕円のような角丸を作成できます。

このプロパティは、ウェブサイトのボタンや画像、カード状のレイアウトなど、様々なデザイン要素に対して柔らかく、より洗練された印象を与えるために利用されます。ユーザーインターフェースに親しみやすさやモダンな雰囲気を加え、ユーザー体験を向上させる上で重要な役割を果たします。border-radiusというショートハンドプロパティの一部として、特定の角のみを個別に制御する際に特に便利に活用できます。

Copy
1border-top-left-radius: 10px;

引数なし

引数はありません

戻り値なし

戻り値はありません