[CSS] border-bottom

border-bottom

border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.

---

border-bottom

border-bottom 속성은 아래쪽 속성을 일괄적으로 설정합니다.

특징	설명
기본 값	border-bottom-width : medium border-bottom-style : none border-bottom-color : currentColor
적용	border
버전	CSS1
사용성

정의(Definition)

• border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.

비교(Compare)

• border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.
• border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
• border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.
• border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.

테두리와 관련된 속성(Border Related Properties)

• border-width는 테두리 두께 속성을 설정합니다.
• border-style는 테두리 스타일 속성을 설정합니다.
• border-color는 테두리 색 속성을 설정합니다.
• border-image는 테두리 이미지 속성을 설정합니다.
• border-radius는 모서리 굴곡을 설정합니다.
• outline는 아웃라인의 속성을 설정합니다.
• box-shadow은 요소의 그림자를 설정합니다.

문법(Syntax)

border-bottom : border-bottom-color | border-bottom-style | border-bottom-width

/* 한 가지 속성만 설정한 경우 : 테두리 두께를 1px로 설정 */
border-bottom : 1px;

/* 두 가지 속성을 설정한 경우 : 테두리 두께를 5px로 설정, 테두리 스타일을 실선으로 설정 */
border-bottom : 5px solid;

/* 두 가지 속성을 설정한 경우 : 테두리 두께를 1px로 설정, 테두리 스타일을 긴 점선으로 설정 */
border-bottom : 1px dashed;

/* 세 가지 속성을 설정한 경우 : 테두리 두께를 5px로 설정, 테두리 스타일을 점선으로 설정, 테두리 색을 빨간색으로 설정 */
border-bottom : 5px dotted red;

/* 세 가지 속성을 설정한 경우 : 테두리 두께를 10px로 설정, 테두리 스타일을 이중선으로 설정, 테두리 색을 회색으로 설정 */
border-bottom : 10px double #ccc;

/* 세 가지 속성을 설정한 경우 : 테두리 두께를 3px로 설정, 테두리 스타일을 긴 점선으로 설정, 테두리 색을 #797979로 설정 */
border-bottom : 3px dashed #797979;

속성(Property)

속성값	설명
border-bottom-color	아래쪽 테두리 색 속성을 설정합니다.
border-bottom-style	아래쪽 테두리 스타일 속성을 설정합니다.
border-bottom-width	아래쪽 테두리 두께 속성을 설정합니다.
inherit	아래쪽 테두리 속성을 부모 요소로부터 상속받습니다.

예제1(Sample)

border-bottom 속성을 설정하는 예제입니다.

border-bottom : 1px solid #4390e1; border-bottom : dashed #4390e1; border-bottom : 8px solid #4390e1 border-bottom : 10px double #4390e1 border-bottom : 9px dotted #4390e1

아이템

HTML

CSS

SCRIPT

<div class="border-box">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.border-box {
    display: flex;
}
.border-box > div {
    flex: 1 1 20%;
    border-radius: 3px;
    background-color: #a2cbfa;
    border: 1px solid #4390e1;
    box-sizing: border-box;
    box-shadow: 0 2px 2px rgb(0 90 250 / 5%), 0 4px 4px rgb(0 90 250 / 5%), 0 8px 8px rgb(0 90 250 / 5%), 0 16px 16px rgb(0 90 250 / 5%);
    color: #fff;
    padding: 10px;
    margin: 1%;
    min-height: 100px;
}

//Javascript none

호환성(Compatibility)

						6	7	8	9	10	11
border-bottom	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
border-bottom-color	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
border-bottom-style	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능
border-bottom-width	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---