Border trong CSS
Thuộc tính border trong CSS được dùng để tạo đường viền cho các phần tử.
Thuộc Tính Border
Thuộc tính border
trong CSS được dùng để tạo đường viền cho các phần tử. Sử dụng thuộc tính border
chúng ta có thể gán giá trị cho một hoặc nhiều thuộc tính khác như độ rộng đường viền (border-width), kiểu đường viền (border-style) và àu sắc đường viền (border-color) của phần tử.
selector {
border: border-width, border-style, border-color;
}
Ví dụ:
p {
border: 2px solid #333;
}
Kiểu Đường Viền
Thuộc tính border-style
được sử dụng để tạo kiểu cho đường viền.
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
Bạn cũng có thể tạo các kiểu đường viền khác nhau cho viền trên, viền phải, viền dưới, viền trái bằng cách gán đồng thời các giá trị này theo thứ tự lần lượt như vừa liệt kê.
p.mix {
border-style: dotted dashed solid double;
}
Độ Rộng Đường Viền
Thuộc tính border-width
được sử dụng để tạo độ rộng cho đường viền. Giá trị của thuộc tính này có thể được gán sử dụng đơn vị là pixel
, cm
, pt
(point)... Hoặc sử dụng các đơn vị đo mặc định của trình duyệt như: thin
, medium
hoặc thick
.
p.first {
border-style: solid;
border-width: 5px;
}
p.second {
border-style: solid;
border-width: medium;
}
p.third {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Màu Đường Viền
Thuộc tính border-color
được sử dụng để tạo màu cho đường viền. Khi gán giá trị màu cho thuộc tính này có thể dùng:
-
Màu theo tên như
black
,blue
,red
... -
Màu Hex như
#000
,#ccc
... -
Màu RBG như
rgb(0, 0, 0)
,rgb(255,0 , 0)
...
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
Tương tự như thuộc tính border-style
, bạn cũng có thể gán các giá trị khác nhau cho màu của viền trên, viền phải, viền dưới và viền trái.
p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Viền Riêng Lẻ
Bạn cũng có thể sử dụng một hoặc nhiều thuộc tính sau để tạo viền riêng lẻ cho phần tử:
-
Thuộc tính
border-top
: Dùng để tạo viền trên cùng cho phần tử -
Thuộc tính
border-bottom
: Tạo viền dười cho phần tử. -
Thuộc tính
border-left
: Tạo viền trái cho phần tử. -
Thuộc tính
border-right
: Tạo viền phải cho phần tử.
Ví dụ:
p.top {
border-top: 1px solid #333;
}
p.left {
border-left: 1px solid #ccc;
}
- Posted by baobinhnet
- 2020-06-09 10:02:43