border-top-right-radius
border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
border-top-right-radius
border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
정의(Definition)
- border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
비교(Compare)
- border-radius 속성은 모서리 굴곡을 설정합니다.
- border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
- border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
- border-bottom-left-radius 속성은 아랫부분 왼쪽 모서리 굴곡을 설정합니다.
- border-bottom-right-radius 속성은 아랫부분 오른쪽 모서리 굴곡을 설정합니다.
테두리와 관련된 속성(Border Related Properties)
- border-width는 테두리 두께 속성을 설정합니다.
- border-style는 테두리 스타일 속성을 설정합니다.
- border-color는 테두리 색 속성을 설정합니다.
- border-image는 테두리 이미지 속성을 설정합니다.
- border-radius는 모서리 굴곡을 설정합니다.
- outline는 아웃라인의 속성을 설정합니다.
- box-shadow은 요소의 그림자를 설정합니다.
문법(Syntax)
border-top-right-radius : length | %
/* 기본 속성을 설정한 경우 */
border-top-left-radius : 20px;
border-top-left-radius : 1em;
border-top-left-radius : 10%
속성(Property)
속성값 | 설명 |
---|---|
length | 테두리 굴곡을 CSS 단위로 설정합니다. |
% | 테두리 굴곡을 %로 설정합니다. |
예제1(Sample)
모서리 굴곡을 설정하는 예제입니다.
border-top-right-radius : 0
border-top-right-radius : 20px;
border-top-right-radius : 1em;
border-top-right-radius : 10%;
border-top-right-radius : 50%;
border-top-right-radius : 40px 20px;
border-top-right-radius : 40px 50%;
HTML
CSS
SCRIPT
<div class="radius-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.radius-box {
display: flex;
justify-content: space-evenly;
}
.radius-box .box {
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%);
width: 200px;
height: 200px;
color: #fff;
padding: 10px;
margin: 1%;
}
//Javascript none
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-top-right-radius | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |