CSS에서는 요소에 테두리를 정의하고 다양하게 스타일을 지정할 수 있습니다. border 속성은 요소의 테두리 관련 설정을 한 번에 처리할 수 있는 단축(shorthand) 속성으로, border-width(테두리 두께), border-style(테두리 스타일), border-color(테두리 색상) 세 가지 하위 속성을 포함합니다.
또한 CSS에서는 일반적인 실선이나 점선뿐만 아니라 이미지를 테두리로 사용하는 것도 가능하며, border-radius 속성을 활용하면 모서리가 둥근 형태의 테두리도 쉽게 만들 수 있습니다.
기본 문법(Syntax)
CSS border 속성의 기본 문법은 다음과 같습니다.
Selector {
border: /*값*/;
}예제 1: 이미지 테두리 적용하기
다음 예제는 border-image 속성을 사용하여 이미지를 테두리로 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 70px solid transparent;
margin: 15px;
padding: 3px;
border-image: url("https://www.tutorialspoint.com/tensorflow/images/tensorflow.jpg") 30 round;
background-color: beige;
}
</style>
</head>
<body>
<p>TensorFlow는 모든 개발자를 위한 오픈소스 머신러닝 프레임워크입니다. 머신러닝 및 딥러닝 애플리케이션 구현에 활용됩니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 문단 주변에 지정한 이미지가 반복되어 테두리처럼 둘러싸인 결과를 확인할 수 있습니다.
예제 2: border-radius로 둥근 테두리 만들기
다음 예제는 border-radius 속성과 그라디언트 배경을 함께 사용하여 각 모서리가 서로 다른 곡률을 가진 둥근 테두리를 구현하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#d1 {
margin: auto;
width: 60%;
border: 4px solid sienna;
padding: 10px;
background-image: linear-gradient(133deg, #a4c888, #2343e2, #33b329, #d10373);
border-radius: 55px 100px 2px 95px;
}
#d2 {
border: 1.5px solid rosybrown;
padding: 10px;
border-radius: 205px 500px;
}
img {
border-radius: 3% 50%;
display: block;
margin: auto;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<img src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg" >
</div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 네 개의 모서리가 각각 다른 곡률로 둥글게 처리된 외곽 박스와, 타원형에 가까운 내부 박스, 그리고 비대칭적으로 둥근 이미지가 중첩된 디자인을 확인할 수 있습니다.
정리
CSS의 border 속성 하나만으로도 테두리의 두께, 스타일, 색상을 간편하게 지정할 수 있으며, border-image와 border-radius 같은 확장 속성을 조합하면 이미지 테두리나 둥근 모서리 등 훨씬 다채로운 디자인을 손쉽게 구현할 수 있습니다.