윤곽선은 공간을 차지하지 않으며 설정된 경우 테두리 주위에 표시됩니다. 요소를 강조 표시하는 데 사용되며 개별 면에 윤곽선이 있어야 하는지 여부를 지정할 수 없습니다. 테두리와 마찬가지로 윤곽선은 기본적으로 표시되지 않습니다. Firefox와 같은 일부 브라우저에서는 초점이 맞춰진 요소가 얇은 윤곽선으로 표시됩니다.
테두리는 더 크게 사용자 정의할 수 있습니다. 테두리의 개별 면에 스타일을 지정하고 가장자리를 둥글게 만듭니다. 테두리는 공간을 차지하고 상자 크기에 영향을 줍니다.
구문
CSS 테두리 속성의 구문은 다음과 같습니다 -
Selector {
border: /*value*/
outline: /*value*/
} 예시
다음 예는 CSS 아웃라인 및 테두리 속성을 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: flex;
float: left;
margin: 20px;
padding: 12px;
width: 30%;
outline: thin dotted;
background-color: lavender;
}
p + p {
width: 250px;
outline: none;
border: outset;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995.</p>
<p>Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. Java is a MUST for students and working professionals to become a great Software Engineer specially when they are working in Software Development Domain</p>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: auto;
width: 70%;
outline: thick double;
background-color: lightgoldenrodyellow;
}
h3 {
border: inset;
}
</style>
</head>
<body>
<h3>Kotlin Tutorial</h3>
<article>Kotlin is a programming language introduced by JetBrains, the official designer of the most intelligent Java IDE, named Intellij IDEA. This is a strongly statically typed language that runs on JVM. In 2017, Google announced Kotlin is an official language for android development. Kotlin is an open source programming language that combines object-oriented programming and functional features into a unique platform.</article>
</body>
</html> 출력
이것은 다음 출력을 제공합니다 -
