CSS의 border(테두리) 속성은 HTML 요소의 테두리를 정의하는 데 사용되는 속성입니다. 이 속성은 border-width(테두리 두께), border-style(테두리 스타일), border-color(테두리 색상) 세 가지 속성을 하나로 묶은 단축 속성(shorthand)입니다.
또한 border-top, border-right, border-bottom, border-left처럼 방향별 개별 속성을 활용하면 요소의 특정 면에만 서로 다른 테두리 스타일을 적용할 수 있습니다.
기본 문법
CSS border 속성의 기본적인 작성 형식은 다음과 같습니다.
Selector {
border: /*값*/
}예제 1: 방향별 테두리 스타일 지정하기
다음 예제는 border-left, border-right, border-top, border-bottom을 사용해 각 면에 서로 다른 테두리를 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-style: solid;
margin: auto;
padding: 5px;
border-radius: 50%;
}
#main {
height: 100px;
width: 100px;
border-left: 12px ridge goldenrod;
border-right: 12px ridge goldenrod;
}
#main > div {
line-height: 12px;
height: 30px;
width: 10px;
padding: 27px 20px;
border-top: 6px groove crimson;
border-bottom: 6px ridge crimson;
}
</style>
</head>
<body>
<div id="main">
<div>i see you</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
예제 2: 상단 테두리 세부 속성 활용하기
이번 예제는 border-top-width, border-top-style, border-top-color처럼 세부 속성을 개별적으로 지정하여 상단 테두리만 스타일링하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 60%;
margin: auto;
padding: 20px 45px;
border-top-width: 1.4em;
border-top-style: solid;
border-top-color: violet;
border-radius: 85px 85px 0 0;
color: black;
font-size: 1.3em;
background-image: url("https://www.tutorialspoint.com/images/css.png");
}
</style>
</head>
<body>
<p>CSS는 웹 문서의 스타일을 간단한 방식으로 제어합니다. 웹 페이지의 외관과 느낌(look and feel)을 담당합니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
정리
CSS border 속성은 테두리의 두께, 스타일, 색상을 한 줄로 간결하게 지정할 수 있는 강력한 도구입니다. solid, dashed, dotted, double, groove, ridge 등 다양한 테두리 스타일을 조합하면 버튼, 카드, 배너 등 웹 페이지의 시각적 완성도를 크게 높일 수 있습니다.