border-right
border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
border-right
border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다..
특징 | 설명 |
---|---|
기본 값 |
border-right-width : medium border-right-style : none border-right-color : currentColor |
적용 | border |
버전 | CSS3 |
사용성 |
정의(Definition)
- border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
비교(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-right : border-left-color | border-left-style | border-left-width
/* 한 가지 속성만 설정한 경우 : 테두리 두께를 1px로 설정 */
border-right : 1px;
/* 두 가지 속성을 설정한 경우 : 테두리 두께를 5px로 설정, 테두리 스타일을 실선으로 설정 */
border-right : 5px solid;
/* 두 가지 속성을 설정한 경우 : 테두리 두께를 1px로 설정, 테두리 스타일을 긴 점선으로 설정 */
border-right : 1px dashed;
/* 세 가지 속성을 설정한 경우 : 테두리 두께를 5px로 설정, 테두리 스타일을 점선으로 설정, 테두리 색을 빨간색으로 설정 */
border-right : 5px dotted red;
/* 세 가지 속성을 설정한 경우 : 테두리 두께를 10px로 설정, 테두리 스타일을 이중선으로 설정, 테두리 색을 회색으로 설정 */
border-right : 10px double #ccc;
/* 세 가지 속성을 설정한 경우 : 테두리 두께를 3px로 설정, 테두리 스타일을 긴 점선으로 설정, 테두리 색을 #797979로 설정 */
border-right : 3px dashed #797979;
속성(Property)
속성값 | 설명 |
---|---|
border-right-color | 오른쪽 테두리 색 속성을 설정합니다. |
border-right-style | 오른쪽 테두리 스타일 속성을 설정합니다. |
border-right-width | 오른쪽 테두리 두께 속성을 설정합니다. |
예제1(Sample)
border-right 속성을 설정하는 예제입니다.
<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-right | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
border-right-color | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
border-right-style | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
border-right-width | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |