CSS 테두리 속성은 요소의 테두리 속성을 정의하는 데 사용됩니다. border-width, border-style 및 border-color의 약어입니다. 각 면의 테두리에 스타일을 지정할 수 있으며 테두리 반경도 지정할 수 있습니다.
반면 CSS 아웃라인은 공간을 차지하지 않으며 설정하면 테두리 주위에 표시됩니다. 오프셋을 지원합니다. 또한 개별 면에 윤곽선이 있어야 하는지 여부를 지정할 수 없습니다.
기본적으로 테두리와 윤곽선은 모두 표시되지 않습니다.
구문
CSS 테두리 및 개요 속성의 구문은 다음과 같습니다. -
Selector {
border: /*value*/
outline: /*value*/
} 예시
다음 예는 CSS 테두리 및 외곽선 속성을 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 15px;
padding: 20px;
width: 35%;
border: thin solid green;
outline-width: 5px;
outline-style: ridge;
outline-color: fuchsia;
border-radius: 50px;
}
</style>
</head>
<body>
<h2>Example</h2>
<div>This is it!</div>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 40px;
padding: 12px;
width: 30%;
border: thick dashed green;
outline: 5px inset;
outline-color: fuchsia;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text surrounded by border and outline.</p>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
