Học web chuẩn

Ví dụ về thuộc tính border

Thuộc tính border-color

Thuộc tính border-color : xác định màu sắc của đường viền.

<html>
<head>
<style type="text/css">
p {
    border: solid;
    border-color: red;
}
</style>
</head>

<body>
<p>border-color</p>
</body>
</html>

border-color

Đầu trang

Thuộc tính border-style

Thuộc tính border-style : xác định hình dạng của đường viền.

<html>
<head>
<style type="text/css">
p {
    border-style: dotted;
}
</style>
</head>

<body>
<p>border-style</p>
</body>
</html>

border-style

Các loại hình dạng cho border:

Ví dụ Mô tả Hiển thị
border-style: none; Xác định thành phần sẽ không có đường viền.

Đường viền hiển thị

border-style: hidden; Giống như giá trị none, nhưng được dùng cho table.

Đường viền hiển thị

border-style: dotted; Xác định đường viền cho thành phần là dấu chấm (dotted).

Đường viền hiển thị

border-style: dashed; Xác định đường viền cho thành phần là gạch ngang (dashed).

Đường viền hiển thị

border-style: solid; Xác định đường viền cho thành phần là đường thẳng nét (solid).

Đường viền hiển thị

border-style: double; Xác định đường viền cho thành phần là 2 đường thẳng nét (double).

Đường viền hiển thị

border-style: groove; Xác định đường viền cho thành phần là đường rãnh (groove).

Đường viền hiển thị

border-style: ridge; Xác định đường viền cho thành phần là đường chóp (ridge).

Đường viền hiển thị

border-style: inset; Xác định đường viền cho thành phần là đường bóng bên trong (inset).

Đường viền hiển thị

border-style: outset; Xác định đường viền cho thành phần là đường bóng bên ngoài (outset).

Đường viền hiển thị

border-style: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Đường viền hiển thị

Đầu trang

Thuộc tính border-width

Thuộc tính border-width : xác định bề dày của đường viền.

<html>
<head>
<style type="text/css">
p {
    border: solid;
    border-width: 5px;
}
</style>
</head>

<body>
<p>border-width</p>
</body>
</html>

border-width

Đầu trang

Thuộc tính border-top

Thuộc tính border-top : xác định đường viền bên trên.

Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.

<html>
<head>
<style type="text/css">
p {
    border-top: #ff0000 solid 2px;
}
</style>
</head>

<body>
<p>border-top</p>
</body>
</html>

border-top

Đầu trang

Thuộc tính border-right

Thuộc tính border-right : xác định đường viền bên phải.

Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.

<html>
<head>
<style type="text/css">
p {
    border-right: #ff0000 solid 2px;
}
</style>
</head>

<body>
<p>border-right</p>
</body>
</html>

border-right

Đầu trang

Thuộc tính border-bottom

Thuộc tính border-bottom : xác định đường viền bên dưới.

Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.

<html>
<head>
<style type="text/css">
p {
    border-bottom: #ff0000 solid 2px;
}
</style>
</head>

<body>
<p>border-bottom</p>
</body>
</html>

border-bottom

Đầu trang

Thuộc tính border-left

Thuộc tính border-left : xác định đường viền bên trái.

Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.

<html>
<head>
<style type="text/css">
p {
    border-left: #ff0000 solid 2px;
}
</style>
</head>

<body>
<p>border-left</p>
</body>
</html>

border-left

Đầu trang

Thuộc tính border

Thuộc tính border : xác định đường viền các vị trí xung quanh (tổng hợp của border-top, border-right, border-bottom, border-left).

Cấu trúc theo dạng tổng hợp của các thuộc tính: border-color, border-style, border-width.

<html>
<head>
<style type="text/css">
p {
    border: #ff0000 solid 2px;
}
</style>
</head>

<body>
<p>border</p>
</body>
</html>

border

Đầu trang