목차
border-right-style 예제 - 테두리 우측 스타일 dotted 경우 border-right-style 정의 border-right-style 구문 border-right-style 예제 - dashed 경우 border-right-style 예제 - solid 경우 border-right-style 예제 - double 경우 border-right-style 예제 - none 경우 border-right-style 예제 - groove 경우 border-right-style 예제 - ridge 경우 border-right-style 예제 - inset 경우 border-right-style 예제 - outset 경우
border-right-style 예제 - 테두리 우측 스타일 dotted 경우
<style>
h1 {border-right-style: dotted; }
div {border-style: solid; border-right-style: dotted; }
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-right-style 정의
테두리 우측 스타일 지정.
1.
border 단축 속성으로 모든 테두리의 스타일 정의 후, border-right-style 속성으로 오른쪽만 다르게 스타일 지정 시 유용.
2.
기본값: none
상속여부: X
애니효과: X
CSS버전: CSS1
JS구문: object .style.borderRightStyle ="dashed"
3.
모든 브라우저 지원 .
4. MDN border-right-style 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style
border-right-style 구문
selector {border-right-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;}
[매개변수]
none (기본값) 테이블(=표) 테두리로 사용될 경우엔 테두리 보임. (= 테이블 테두리 경계충돌 해결 X)
hidden 테이블(=표) 테두리로 사용될 경우조차 테두리 안 보임. (= 테이블 테두리 경계충돌 해결 O)
dotted ★
solid ★
2px 정도의 굵은 테두리.
double ★
두 줄 모양의 테두리.
groove
3D 움푹 파인 홈 모양의 테두리
※ groove: 홈
ridge
3D 위로 올라온 것 같은 모양의 테두리
※ridge: 산등성이
inset
3D 안으로 들어간 느낌의 테두리.
※우측과 좌측이 테두리 진하게 표시
outset
3D 밖으로 나온 느낌의 테두리.
※ 우측과 하단이 테두리 진하게 표시.
initial
inherit
부모요소의 속성값 상속.
border-right-style 예제 - dashed 경우
<style>
h1 {border-right-style: dashed; }
div {border-style: solid; border-right-style: dashed; }
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-right-style 예제 - solid 경우
<style>
h1 {border-right-style: solid; }
div {border-right-style: solid; }
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-right-style 예제 - double 경우
<style>
h1 {border-right-style: double; }
div {border-style: solid; border-right-style: double; }
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-right-style 예제 - none 경우
<style>
h1 {
border-style: solid;
border-right-style: none;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
border-right-style 예제 - groove 경우
<style>
h1 {
border-right-style: groove;
border-right-color: coral;
border-right-width: 10px;
}
div {
border-style: solid;
border-right-style: groove;
border-right-color: yellow;
border-right-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-right-style 예제 - ridge 경우
<style>
h1 {
border-right-style: ridge;
border-right-color: coral;
border-right-width: 10px;
}
div {
border-style: solid;
border-right-style: ridge;
border-right-color: yellow;
border-right-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-right-style 예제 - inset 경우
<style>
h1 {
border-right-style: inset;
border-right-color: coral;
border-right-width: 10px;
}
div {
border-style: solid;
border-right-style: inset;
border-right-color: yellow;
border-right-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-right-style 예제 - outset 경우
<style>
h1 {
border-right-style: outset;
border-right-color: coral;
border-right-width: 10px;
}
div {
border-style: solid;
border-right-style: outset;
border-right-color: yellow;
border-right-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
