CSS 테두리 측면 속성 설정

CSS 테두리 - 개별 측면

이전 페이지의 예를 통해 각 면에 대해 다른 경계를 지정할 수 있음을 알 수 있다.

CSS에서는 각 테두리(위, 오른쪽, 아래 및 왼쪽)를 지정하는 속성도 있다:

p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

p요소에 위쪽 테두리는 점선, 오른족 테두리는 직선, 아래쪽 테두리는 점선, 왼쪽 테두리는 직선으로 스타일한다.

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>

<h2>개별 측면 테두리 </h2>
<p>2개의 다른 테두리 스타일.</p>

</body>
</html>

border-style : dotted, solid 값을 설정하면, 위쪽, 아래쪽 테두리는 점선, 왼쪽, 오른쪽 테두리는 직선을 스타일한다. 아래 그림은 결과 화면이다.

아래 테두리 예시를 표와 같이 정리해 보았다.

css 스타일	적용결과
border-style: dotted solid double dashed	위쪽(점선), 오른쪽(직선), 아래쪽(이중선), 왼쪽(파선)
border-style: dotted solid double	위쪽(점선), 오른쪽, 왼쪽(직선), 아래쪽(이중선)
border-style: dotted solid	위쪽(점선), 아래쪽(점선), 오른쪽(직선), 왼쪽(직선)
border-style: dotted	위쪽, 아래쪽, 오른쪽, 왼쪽 : 점선

위의 스타일을 코딩으로 정리하여 실행해 보았다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>개별 테두리 스타일 설정</h2>
<p class="four">4개 다른 테두리 스타일.</p>
<p class="three">3개 다른 테두리 스타일.</p>
<p class="two">2개 다른 테두리 스타일.</p>
<p class="one">1개 테두리 스타일.</p>

</body>
</html>

실행 결과 화면은 아래 그림과 같다.

지금까지 CSS 테두리 개별적인 측면의 스타일 설정에 관련해서 살펴보았다.

꼭 실습하기를 바랍니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 둥근 테두리 (0)	2023.07.17
CSS 단축 테두리 속성 (0)	2023.07.16
CSS 테두리 너비(CSS border-width) (0)	2023.07.14
CSS border-color 속성 (0)	2023.07.12
CSS 테두리(CSS borders) (0)	2023.07.11