목차
border-right-width 예제 - 테두리 우측 두께 thin 경우 border-right-width 정의 border-right-width 구문 border-right-width 예제 - medium 경우 border-right-width 예제 - thick 경우 border-right-width 예제 - 1px 경우 border-right-width 예제 - 10px 경우
border-right-width 예제 - 테두리 우측 두께 thin 경우
<style>
h1 {
border-right-style: solid;
border-right-width: thin;
}
div {
border-style: solid;
border-right-width: thin;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
※ 주의: border-style 속성 정의 필수.
border-right-width 정의
테두리 우측 두께 지정.
1.
border-right-width 속성 지정 전 반드시 border-style 또는 border-right-style 속성을 먼저 정의 필요 . (왜냐면, 테두리 두께 변경하려면, 테두리 모양이 정해져 있어야 함.)
2.
기본값: medium
상속여부: X
애니효과: O
CSS버전: CSS1
JS구문: object .style.borderRightWidth ="5px"
3.
모든 브라우저 지원 .
4. MDN border-right-width 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width
border-right-width 구문
selector {border-right-width: medium|thin|thick|length |initial|inherit;}
[속성값]
thin
얇은 두께 (1px)
midium
중간 두께 (3px)
thick
굵은 두께 (5px)
length
px, cm, % 등 길이 단위값 (예) 5px
initial
이 속성의 기본값으로 자동설정.
inherit
부모 요소로부터 속성값 상속 ※ 주의
none : 이런 속성값은 존재 X테두리 없애려면, 숫자 0 사용. (예) border-right-width:0;
border-right-width 예제 - medium 경우
<style>
h1 {
border-right-style: solid;
border-right-width: medium;
}
div {
border-style: solid;
border-right-width: medium;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
border-right-width 예제 - thick 경우
<style>
h1 {
border-right-style: solid;
border-right-width: thick;
}
div {
border-style: solid;
border-right-width: thick;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
border-right-width 예제 - 1px 경우
<style>
h1 {
border-right-style: solid;
border-right-width: 1px;
}
div {
border-style: solid;
border-right-width: 1px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
border-right-width 예제 - 10px 경우
<style>
h1 {
border-right-style: solid;
border-right-width: 10px;
}
div {
border-style: solid;
border-right-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>그누보드/영카트 강의</div>
결과보기
