Source

테두리

테두리 유틸리티를 사용하여 요소의 테두리 및 테두리 반경 스타일을 빠르게 지정합니다. 이미지, 버튼 또는 기타 요소에 적합합니다.

국경

테두리 유틸리티를 사용하여 요소의 테두리를 추가하거나 제거합니다. 모든 테두리에서 선택하거나 한 번에 하나씩 선택합니다.

첨가물

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

빼기

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

테두리 색상

테마 색상에 구축된 유틸리티를 사용하여 테두리 색상을 변경합니다.

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

경계 반경

요소에 클래스를 추가하여 모서리를 쉽게 둥글게 만듭니다.

Example rounded image 75x75 Example top rounded image 75x75 Example right rounded image 75x75 Example bottom rounded image 75x75 Example left rounded image 75x75 Completely round image 75x75 Rounded pill image 150x75 Example non-rounded image (overrides rounding applied elsewhere) 75x75 
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">

크기

더 크거나 작은 경계 반경에 .rounded-lgor 를 사용 합니다..rounded-sm

Example small rounded image 75x75 Example large rounded image 75x75 
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded-lg">