Quay về mục lục TỰ HỌC CSS
Thuộc tính border của CSS cho phép ta định dạng các thuộc
tính đường viền của đối tượng HTML như:
- Style – Kiểu
- Width – Bề rộng
- Color – Màu sắc
1. Kiểu
Đường viền trong CSS có các kiểu sau:
dotted – viền chấm
dashed – viền đứt nét
solid – viền liền nét
double – viền đôi
groove – viền nổi 3d
ridge – viền nổi 3d (ngược sáng với groove)
inset – viền tô đậm bên trong
outset – viền tô đậm bên ngoài
none – không có viền
hidden – viền bị ẩn đi
Ví dụ:
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;}
p.mix {border-style: dotted dashed solid double;}
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;}
p.mix {border-style: dotted dashed solid double;}
và mã HTML trong phần body như sau:
<p
class="dotted">Kiểu đường viền dotted</p>
<p
class="dashed">Kiểu đường viền dashed</p>
<p
class="solid">Kiểu đường viền solid</p>
<p
class="double">Kiểu đường viền double</p>
<p
class="groove">Kiểu đường viền groove</p>
<p
class="ridge">Kiểu đường viền ridge</p>
<p
class="inset">Kiểu đường viền inset</p>
<p
class="outset">Kiểu đường viền outset</p>
<p class="none">Không
có đường viền</p>
<p
class="hidden">Kiểu đường viền hidden</p>
<p class="mix">Kiểu
đường viền phối hợp</p>
