AAtomic CSS

border-color

테두리 색상을 설정합니다. border-width와 border-style이 함께 있어야 테두리가 보입니다. 보더 단축 클래스에서 색상이 포함되기도 합니다.

클래스 목록

bc{HEX6} 패턴으로 6자리 HEX 테두리 색상을 지정합니다.

클래스CSS미리보기
bc000000border-color: #000000
bcFFFFFFborder-color: #FFFFFF
bcDDDDDDborder-color: #DDDDDD
bc6366F1border-color: #6366F1
bc34D399border-color: #34D399
bcF43F5Eborder-color: #F43F5E
bc27272Aborder-color: #27272A

보더 단축 클래스와의 관계

보더 단축 클래스 b1pxsolid{HEX6}에는 색상이 이미 포함됩니다. bc는 border-color만 별도로 변경할 때 사용합니다.

<!-- 보더 단축: 색상 포함 -->
<div class="b1pxsolidDDDDDD p16px br8px">색상이 단축에 포함</div>

<!-- border-color만 별도 지정 -->
<div class="bw2px bssolid bc6366F1 p16px br8px">bc로 색상만 지정</div>

<!-- 호버 시 테두리 색상 변경 -->
<div class="b2pxsolid27272A hover-bc6366F1 p16px br8px cp tall200msease">
  호버해 보세요
</div>

호버 테두리 색상

hover-bc{HEX6}로 마우스 오버 시 테두리 색상을 변경합니다.

hover-bc6366F1
hover-bc34D399
hover-bcF43F5E

사용 예시

<!-- 입력 필드 포커스 색상 -->
<input class="bw1px bssolid bc27272A focus-bc6366F1 p12px br8px bg18181B cFAFAFA" />

<!-- 카드 강조 테두리 -->
<div class="b2pxsolid6366F1 p2rem br8px">
  강조된 카드
</div>

<!-- 구분선 색상 -->
<div class="bb1pxsolidDDDDDD pb16px mb16px">
  하단 구분선이 있는 콘텐츠
</div>
borderborder-widthcolorbackground-color