목차
border-right-color 예제 - 테두리 우측 색깔 (색상명)
border-right-color 정의
border-right-color 구문
border-right-color 예제 - 테두리 우측 색깔 (HEX값)
border-right-color 예제 - 테두리 우측 색깔 (RGB값)
border-right-color 예제 - 테두리 우측 색깔 (RGBA값)
border-right-color 예제 - 테두리 우측 색깔 (HSL값)
border-right-color 예제 - 테두리 우측 색깔 (HELA값)
border-right-color 예제 - 테두리 우측 색깔 (투명)
border-right-color 예제 - 테두리 우측 색깔 (색상명)
<style>
h1 {
border-right-style: solid;
border-right-color: coral;
}
div {
border-style: solid;
border-right-color: coral;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>코딩/프로그래밍 강의</div>
결과보기
border-right-color 정의
테두리 우측 색상 지정.
1.
border-right-color 속성 지정 전에 반드시 border-style (또는, border-right-style) 속성을 먼저 선언 필요. (∵ 테두리모양 존재해야 색상 지정 가능)
2.
기본값: 요소의 현재 color값
상속여부: X
애니효과: O
CSS버전: CSS1
JS구문: object .style.borderRightColor ="blue"
3.
모든 브라우저 지원 .
4. MDN border-right-color 예제 보기https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
border-right-color 구문
selector {border-right-color: color |transparent|initial|inherit;}
[속성값]
color
CSS 색상코드 입력 방식은 다양하나, 아래 3가징 방식이 보편적.
색상명 방식 : red (빨강)
Hexadecimal color 코드 방식 : #FF0000 (빨강) 색상코드 보기
RGB 코드 방식 : rgb(255,0,0) (빨강)
transparent
투명 (기본값)
initial
이 속성의 기본값으로 설정
inherit
부모요소 속성값 상속
border-right-color 예제 - 테두리 우측 색깔 (HEX값)
<style>
h1 {
border-right-style: solid;
border-right-color: #FF7F50;
}
div {
border-style: solid;
border-right-color: #FF7F50;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>코딩/프로그래밍 강의</div>
결과보기
border-right-color 예제 - 테두리 우측 색깔 (RGB값)
<style>
h1 {
border-right-style: solid;
border-right-color: rgb(255,127,80);
}
div {
border-style: solid;
border-right-color: rgb(255,127,80);
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>코딩/프로그래밍 강의</div>
결과보기
border-right-color 예제 - 테두리 우측 색깔 (RGBA값)
<style>
h1 {
border-right-style: solid;
border-right-color: rgba(255,127,80,1);
}
div {
border-style: solid;
border-right-color: rgba(255,127,80,1);
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>코딩/프로그래밍 강의</div>
결과보기
border-right-color 예제 - 테두리 우측 색깔 (HSL값)
<style>
h1 {
border-right-style: solid;
border-right-color: hsl(4,100%,66%);
}
div {
border-style: solid;
border-right-color: hsl(4,100%,66%);
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>코딩/프로그래밍 강의</div>
결과보기
border-right-color 예제 - 테두리 우측 색깔 (HELA값)
<style>
h1 {
border-right-style: solid;
border-right-color: hsla(4,100%,66%, 1);
}
div {
border-style: solid;
border-right-color: hsla(4,100%,66%, 1);
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>코딩/프로그래밍 강의</div>
결과보기
border-right-color 예제 - 테두리 우측 색깔 (투명)
<style>
h1 {
border-right-style: solid;
border-right-color: transparent;
}
div {
border-style: solid;
border-right-color: transparent;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>코딩/프로그래밍 강의</div>
결과보기
주소 복사
랜덤 이동