レッスン内容
ボーダーは要素の境界の一つ以上の側面にアウトラインを作成できます。ボーダーはスペースを取り、要素の寸法を拡張します。寸法が定義されている要素の場合、ボーダーは内部のコンテンツに押し当てられます。
要素の寸法を拡張せずにボーダーエフェクトを追加するには、ぼかしを0に設定した内部または外部のボックスシャドウを追加します。
半径（Radius）
要素のすべての角または個々の角の半径を定義して、角を丸めることができます。
デフォルトでは、半径はピクセル（px）で設定されます。パーセンテージを使用するには、パーセンテージの値と文字（%）を任意のボーダー入力フィールドに入力します。ユニットドロップダウンから利用可能な任意のCSSユニットを使用することもできます。
スタイル（Style）
スタイルプロパティは、要素を囲むボーダーの種類を決定します。ボーダーは実線、破線、点線にすることができます。スタイルをnoneに設定することで、ボーダー設定を非表示にすることもできます。
一部の組み込み要素にはデフォルトのボーダーが付属しており、フォーム入力フィールドやブロック引用などがあります。ボーダーのスタイルをnoneに設定することで、デフォルトのボーダーを削除できます。
幅（Width）
幅はボーダーの太さを決定します。この値は、ユニットドロップダウンで利用可能なリストから任意のCSSユニットを持つことができます。
色（Color）
Style panel > Color では、ボーダー設定で要素のボーダーの色と透明度を指定できます。ボーダーの一辺の色を変更すると、ベベル効果または額縁効果が得られます。
形状（Shapes）
デフォルトでは、要素の半径を設定するとその値がすべての角に適用されます。スライダーをドラッグするか、入力フィールドに値を入力して値を設定できます。
丸い角を得るためにピクセル値を使用し、同じアスペクト比で楕円形の角を得るためにパーセンテージを使用します。
カプセル形状（Capsule shapes）
カプセル形状の場合、要素の最も短い寸法の半分以上のピクセル値を半径として設定します。計算をスキップしたい場合、通常は500などの大きな数を使用します。
楕円形（Ellipses）
楕円形の場合、半径を50%に設定します。パーセンテージは要素の幅と高さに基づきます。
注意: 異なる寸法を持つ要素がある場合、楕円形は一貫性がないように見えることがあります。
円（Circles）
円の場合、半径を50%に設定し、要素の幅と高さが同じであることを確認してください。
ユニークな形状
ユニークな形状を作成するために、各角に異なる値を設定できます。
長方形から円へ
歪ませずに長方形のイメージを円形にするには、イメージをDivブロック内に配置するために半径とオブジェクトフィットを使用できます。以下の手順を参考にしてください。
- キャンバスにDivブロックをドラッグします。
- イメージをDivブロック内にドラッグします。
- Divブロックを選択します。
- スタイルパネル > セレクターに移動し、クラス（例: Image holder thing）を作成します。
- 平等な高さと幅（例: 400px）を設定します。
- 半径を50%に設定します（幅と高さが等しいため、円形にするため）。
- オーバーフローを非表示に設定します（円の外部にある画像の一部を非表示にするため）。
- キャンバス上のイメージを選択します。
- イメージの幅と高さを100%に設定します。
- フィットをカバーに設定します（円形のDivブロック内のスペースをカバーするため）。
- フィットの横にある楕円形をクリックして、円形のカバーを位置づけます（角にアンカーするか、中心にアンカーするか）。
側面とエッジ
スタイルパネル > ボーダー では、すべての側面を一度にスタイルできます（中央をクリックすることで）または個々の側面をスタイルできます。
上部にボーダーを作成してスタイルを付けると、上部のみに影響します。左側にボーダーを作成してスタイルを付けると、左側のみに影響します。
ベベル（Bevels）
ベベルは画像に奥行きを追加します。
ボタンにベベル効果を追加するには、Style panel > Borders を開きます。
- ボタンのすべての側面にボーダーを追加します（例: すべての側面に幅10pxを設定）
- ボタンの色とは異なるボーダーの色をすべての側面に追加します
- スタイルパネルでボーダーの一側をクリックします
- 色をクリックして、色（元のボーダーの色とは異なる色）を追加します
- 一側の幅を変更します
アニメーションされたトランジション
スタイルパネルでは、あらゆるものにスタイルを適用できます。ここではボタンにホバー時のアニメーションを追加しましょう。
ボタンにホバー時に角丸の角を付けるには：
- キャンバス上のボタンを選択します
- Style panel > Selector に移動し、ドロップダウンから Hover を選択します
- 下にスクロールして Borders に移動し、半径（例: 10px）を追加します。
セレクターをホバーに変更
ボタンをホバー解除したときに元の状態に戻し、スムーズなトランジションを作成するには：
- キャンバス上でボタンを選択します
- Style panel > Selector に移動し、ドロップダウンから None を選択します
- 下にスクロールして Effects > Transitions > Type > Property > Border radius を選択します。
noneを選択
Border-Radiusにトランジションを追加
このアニメーションを削除するには：
- キャンバス上でボタンを選択します
- Style panel > Selector に移動し、ドロップダウンから Hover を選択します
- 下にスクロールして Borders > Radius > Reset を選択します。
ボタンをクリックしたときに角丸にするために：
- キャンバス上でボタンを選択します。
- Style panel > Selector に移動し、ドロップダウンから Pressed を選択します。
- 下にスクロールしてBordersを選択し、radius（例：10px）を追加します。
上記の手順を使用して、ホバーやクリック時にボーダーカラーやボーダー幅などをアニメーション化することができます。