테두리

테두리 (Borders)

요소의 테두리와 border-radius를 빠르게 스타일링할 수 있는 테두리 유틸리티예요. 이미지, 버튼, 또는 다른 요소에 아주 유용해요.

출처: 문서

본문

테두리 (Border)

테두리 유틸리티로 요소의 테두리를 추가하거나 제거할 수 있어요. 모든 테두리를 선택하거나 한 번에 하나씩 선택할 수 있어요.

추가 (Additive)

커스텀 요소에 테두리를 추가해 보세요:

<span class="border">
</span>
<span class="border-top">
</span>
<span class="border-end">
</span>
<span class="border-bottom">
</span>
<span class="border-start">
</span>

제거 (Subtractive)

또는 테두리를 제거:

<span class="border border-0">
</span>
<span class="border border-top-0">
</span>
<span class="border border-end-0">
</span>
<span class="border border-bottom-0">
</span>
<span class="border border-start-0">
</span>

색상 (Color)

원래 $theme-colors Sass 맵에서 생성된 .border-* 같은 테두리 유틸리티는 아직 color mode에 반응하지 않지만, .border-*-subtle 유틸리티는 반응해요. 이 문제는 v6에서 해결될 거예요.

테마 색상 기반으로 구축된 유틸리티로 테두리 색상을 바꿔요.

<span class="border border-primary">
</span>
<span class="border border-primary-subtle">
</span>
<span class="border border-secondary">
</span>
<span class="border border-secondary-subtle">
</span>
<span class="border border-success">
</span>
<span class="border border-success-subtle">
</span>
<span class="border border-danger">
</span>
<span class="border border-danger-subtle">
</span>
<span class="border border-warning">
</span>
<span class="border border-warning-subtle">
</span>
<span class="border border-info">
</span>
<span class="border border-info-subtle">
</span>
<span class="border border-light">
</span>
<span class="border border-light-subtle">
</span>
<span class="border border-dark">
</span>
<span class="border border-dark-subtle">
</span>
<span class="border border-black">
</span>
<span class="border border-white">
</span>

또는 컴포넌트의 기본 border-color를 수정:

<div class="mb-4">
 <label class="form-label" for="exampleFormControlInput1">
  Email address
 </label>
 <input class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]" type="email"/>
</div>
<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
 Dangerous heading
</div>
<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
 Changing border color and width
</div>

불투명도 (Opacity)

Bootstrap border-{color} 유틸리티는 CSS 변수를 사용해 Sass로 생성돼요. 이 덕분에 컴파일 없이 실시간 색상 변경과 동적 알파 투명도 변경이 가능해요.

동작 원리 (How it works)

기본 .border-success 유틸리티를 생각해 보세요.

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

우리는 --bs-success(값 25, 135, 84)의 RGB 버전 CSS 변수를 사용하고, 알파 투명도를 위해 두 번째 CSS 변수 --bs-border-opacity를 붙였어요(로컬 CSS 변수 덕분에 기본값 1). 즉 이제 .border-success를 사용할 때마다 계산된 색상 값은 rgba(25, 135, 84, 1)이 돼요. 각 .border-* 클래스 안의 로컬 CSS 변수는 상속 문제를 피해서 중첩된 유틸리티 인스턴스가 자동으로 수정된 알파 투명도를 가지지 않게 해 줘요.

예시 (Example)

그 불투명도를 바꾸려면 커스텀 스타일이나 인라인 스타일로 --bs-border-opacity를 오버라이드하세요.

<div class="border border-success p-2 mb-2">
 This is default success border
</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">
 This is 50% opacity success border
</div>

또는 .border-opacity 유틸리티 중 아무거나 선택할 수 있어요:

<div class="border border-success p-2 mb-2">
 This is default success border
</div>
<div class="border border-success p-2 mb-2 border-opacity-75">
 This is 75% opacity success border
</div>
<div class="border border-success p-2 mb-2 border-opacity-50">
 This is 50% opacity success border
</div>
<div class="border border-success p-2 mb-2 border-opacity-25">
 This is 25% opacity success border
</div>
<div class="border border-success p-2 border-opacity-10">
 This is 10% opacity success border
</div>

너비 (Width)

<span class="border border-1">
</span>
<span class="border border-2">
</span>
<span class="border border-3">
</span>
<span class="border border-4">
</span>
<span class="border border-5">
</span>

반경 (Radius)

요소에 클래스를 추가해서 모서리를 쉽게 둥글게 만들 수 있어요.

<img alt="..." class="rounded" src="..."/>
<img alt="..." class="rounded-top" src="..."/>
<img alt="..." class="rounded-end" src="..."/>
<img alt="..." class="rounded-bottom" src="..."/>
<img alt="..." class="rounded-start" src="..."/>

크기 (Sizes)

스케일링 클래스로 더 크거나 더 작은 둥근 모서리를 사용할 수 있어요. 크기는 0에서 5까지이며 circle과 pill을 포함하고, utilities API를 수정해 구성할 수 있어요.

<img alt="..." class="rounded-0" src="..."/>
<img alt="..." class="rounded-1" src="..."/>
<img alt="..." class="rounded-2" src="..."/>
<img alt="..." class="rounded-3" src="..."/>
<img alt="..." class="rounded-4" src="..."/>
<img alt="..." class="rounded-5" src="..."/>
<img alt="..." class="rounded-circle" src="..."/>
<img alt="..." class="rounded-pill" src="..."/>

<img alt="..." class="rounded-bottom-1" src="..."/>
<img alt="..." class="rounded-start-2" src="..."/>
<img alt="..." class="rounded-end-circle" src="..."/>
<img alt="..." class="rounded-start-pill" src="..."/>
<img alt="..." class="rounded-5 rounded-top-0" src="..."/>

CSS

변수 (Variables)

scss/_root.scss

--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-translucent: #{$border-color-translucent};

--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill};

Sass 변수 (Sass variables)

scss/_variables.scss

$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);
$border-style:                solid;
$border-color:                $gray-300;
$border-color-translucent:    rgba($black, .175);

scss/_variables.scss

$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-xxl:           2rem;
$border-radius-pill:          50rem;

라이트·다크 모드에서 .border-*-subtle 유틸리티의 border-color를 설정하는 변수:

scss/_variables.scss

$primary-border-subtle:   tint-color($primary, 60%);
$secondary-border-subtle: tint-color($secondary, 60%);
$success-border-subtle:   tint-color($success, 60%);
$info-border-subtle:      tint-color($info, 60%);
$warning-border-subtle:   tint-color($warning, 60%);
$danger-border-subtle:    tint-color($danger, 60%);
$light-border-subtle:     $gray-200;
$dark-border-subtle:      $gray-500;

scss/_variables-dark.scss

$primary-border-subtle-dark:        shade-color($primary, 40%);
$secondary-border-subtle-dark:      shade-color($secondary, 40%);
$success-border-subtle-dark:        shade-color($success, 40%);
$info-border-subtle-dark:           shade-color($info, 40%);
$warning-border-subtle-dark:        shade-color($warning, 40%);
$danger-border-subtle-dark:         shade-color($danger, 40%);
$light-border-subtle-dark:          $gray-700;
$dark-border-subtle-dark:           $gray-800;

Sass 맵 (Sass maps)

Color mode 적응형 테두리 색상도 Sass 맵으로 사용할 수 있어요:

scss/_maps.scss

$theme-colors-border-subtle: (
  "primary": $primary-border-subtle,
  "secondary": $secondary-border-subtle,
  "success": $success-border-subtle,
  "info": $info-border-subtle,
  "warning": $warning-border-subtle,
  "danger": $danger-border-subtle,
  "light": $light-border-subtle,
  "dark": $dark-border-subtle,
);

scss/_maps.scss

$theme-colors-border-subtle-dark: (
  "primary": $primary-border-subtle-dark,
  "secondary": $secondary-border-subtle-dark,
  "success": $success-border-subtle-dark,
  "info": $info-border-subtle-dark,
  "warning": $warning-border-subtle-dark,
  "danger": $danger-border-subtle-dark,
  "light": $light-border-subtle-dark,
  "dark": $dark-border-subtle-dark,
);

Sass mixin (Sass mixins)

scss/mixins/_border-radius.scss

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

Sass utilities API

테두리 유틸리티는 scss/_utilities.scss의 utilities API에 선언돼 있어요. utilities API 사용법을 배워 보세요.

scss/_utilities.scss

"border": (
  property: border,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-top": (
  property: border-top,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-end": (
  property: border-right,
  class: border-end,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-bottom": (
  property: border-bottom,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-start": (
  property: border-left,
  class: border-start,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-color": (
  property: border-color,
  class: border,
  local-vars: (
    "border-opacity": 1
  ),
  values: $utilities-border-colors
),
"subtle-border-color": (
  property: border-color,
  class: border,
  values: $utilities-border-subtle
),
"border-width": (
  property: border-width,
  class: border,
  values: $border-widths
),
"border-opacity": (
  css-var: true,
  class: border-opacity,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),

scss/_utilities.scss

"rounded": (
  property: border-radius,
  class: rounded,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-top": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-end": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-bottom": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-start": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),

더 알아보기 (Learn more)

• Bootstrap 문서