Đường viền không chiếm không gian và được hiển thị xung quanh đường viền nếu được đặt. Nó được sử dụng để làm nổi bật các yếu tố và chúng tôi không thể chỉ định liệu các mặt riêng lẻ có nên có đường viền hay không. Giống như đường viền, đường viền không được hiển thị theo mặc định. Trong một số trình duyệt, chẳng hạn như Firefox, các phần tử tập trung được hiển thị với đường viền mỏng.
Các đường viền có thể được tùy chỉnh ở mức độ lớn hơn. Chúng tôi tạo kiểu cho các mặt riêng lẻ của đường viền và làm tròn các cạnh của chúng. Các đường viền chiếm dung lượng và ảnh hưởng đến kích thước hộp.
Cú pháp
Cú pháp của thuộc tính đường viền CSS như sau -
Selector {
border: /*value*/
outline: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính đường viền và đường viền 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> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này cho kết quả sau -
