Border（ボーダー）

使い方

  1. e-roundedやe-rounded-circleでその要素に丸みを持たせます。（画像、ボタン、ボックスなどに使用）
  2. e-borderとe-border-3で線とその太さを設定します。

画面表示

詳しくはこちら
このようにBoxにも利用できます。

HTML/CSS（Sass）

<a href="#" class="e-button e-buttondesign e-rounded-button e-rounded-circle">詳しくはこちら</a>

<div class="box e-border-3 e-border e-rounded">
このようにBoxにも利用できます。
</div>
.e-border {
  border: 0.1rem solid red;
}

.e-border-1 {
  border-width: 0.1rem;
}

.e-border-2 {
  border-width: 0.2rem;
}

.e-border-3 {
  border-width: 0.3rem;
}

.e-border-4 {
  border-width: 0.4rem;
}

.e-border-5 {
  border-width: 0.5rem;
}

.e-rounded {
  border-radius: 1rem;
}
.e-rounded-circle {
  border-radius: 100vh;
}

.e-border {
    border: 0.1rem solid red;
}

@for $i from 1 through 5 {
    .e-border-#{$i} { border-width: 0.1rem * $i; }
}

.e-rounded {
    border-radius: 1rem;
    &-circle {
        border-radius: 100vh;
    }
}
TOP