Trong bài hướng dẫn tự học CSS này, bạn sẽ học cách sử dụng CSS để tạo các đường viền (border) xung quanh của một phần tử.
Thuộc tính border là gì?
Thuộc tính border trong CSS cho phép bạn tạo ra đường viền của hộp phần tử.
Các đường viền xuất hiện trực tiếp giữa phần lề (maring) và phần đệm (padding) của một phần tử.
Đường viền (border) có thể là kiểu được xác định trước như:
- Đường viền nét liền
- Đường viết nét đứt
- Đường viền 2 nét
- Hoặc cả hình ảnh
- …
Phần dưới đây bạn sẽ học được cách thiết lập đường viền một cách chi tiết nhất.
Nhưng trước tiên, bạn dần biết
Có các kiểu border nào trong CSS?
Thuộc tính border-style trong CSScho phép thiết lập kiểu đường viền của hộp chẳng hạn như:
- solid
- dotted
- …
Nó là thuộc tính viết tắt để thiết lập kiểu đường cho tất cả bốn cạnh của đường viền.
Ngoài ra, thuộc tính border-style còn có thể có các giá trị sau:
- none
- hidden
- solid
- dashed
- dotted
- double
- inset
- outset
- grove
- ridge
Bây giờ, hãy xem hình minh họa bên dưới đây, nó sẽ cho bạn thấy các kiểu viền khác nhau hiển thị như thế nào:
Các giá trị none và hidden không có đường viền.
Tuy nhiên, có một chút khác biệt giữa hai giá trị này.
Trong trường hợp ô của bảng và đường viền được thu gọn, giá trị none có mức độ ưu tiên thấp nhất, trong khi giá trị hidden có mức độ ưu tiên cao nhất, nếu có bất kỳ đường viền xung đột nào khác được thiết lập.
Các giá trị inset, outset, groove và ridge tạo ra hiệu ứng giống như 3D về cơ bản phụ thuộc vào giá trị border-color.
Điều này thường đạt được bằng cách tạo ra một ‘bóng’ từ hai màu sáng và tối hơn một chút so với màu của đường viền.
Hãy xem ví dụ sau:
HTML:
<p class="none">No border.</p>
<p class="hidden">Hidden border.</p>
<p class="dotted">dotted border.</p>
<p class="dashed">dashed border.</p>
<p class="solid">solid border.</p>
<p class="double">double border.</p>
<p class="inset">inset border.</p>
<p class="outset">outset border.</p>
<p class="groove">groove border.</p>
<p class="ridge">ridge border.</p>
CSS:
p {
border-width: 5px;
border-color: #f2f2f2;
color: #003999;
padding: 20px;
margin: 20px;
width: 100px;
float: left;
}
p.none {
border-style: none;
}
p.hidden {
border-style: hidden;
}
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;
}
Lưu ý: Bạn phải chỉ định một kiểu đường viền để làm cho đường viền xuất hiện xung quanh một phần tử, vì kiểu đường viền mặc định là không có. Trong khi, chiều rộng hoặc độ dày của đường viền mặc định là medium và màu đường viền mặc định giống với màu văn bản.
Thiết lập chiều rộng của đường viền (border-width)
Thuộc tính border-width chỉ định chiều rộng của đường viền.
Nó là một thuộc tính viết tắt để thiết lập độ dày của tất cả bốn cạnh của đường viền phần tử cùng một lúc.
- Nó có thể chấp nhận 4 giá trị tương ứng với TOP | RIGHT | BOTTOM | LEFT
- 3 giá trị tương ứng với TOP | RIGHT và LEFT | BOTTOM
- 2 giá trị tương ứng với TOP và BOTTOM | RIGHT và LEFT
Hãy thử ví dụ sau để hiểu cách nó hoạt động:
HTML:
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
CSS:
p {
border-style: solid;
border-color: #003999;
padding: 20px;
margin: 20px;
width: 200px;
float: left;
}
p.one {
border-width: 5px;
}
p.two {
border-width: 5px 10px;
}
p.three {
border-width: 5px 10px 15px;
}
p.four {
border-width: medium 10px thick 15px;
}
Kết quả ta được như sau:
Mẹo: Chiều rộng đường viền có thể được chỉ định bằng cách sử dụng bất kỳ giá trị chiều dài nào, chẳng hạn như px, em, rem, v.v. Ngoài các đơn vị chiều dài, chiều rộng đường viền cũng có thể được chỉ định bằng cách sử dụng một trong ba từ khóa: thin, medium và thick. Nhưng giá trị % thì không được.
Cách thiết lập màu sắc của đường viền (border-color)
Thuộc tính border-color chỉ định màu của đường viền. Đây cũng là một thuộc tính viết tắt để thiết lập màu của tất cả bốn cạnh của đường viền phần tử.
Các quy tắc CSS sau đây thêm một đường viền đặc màu đỏ xung quanh các đoạn văn.
HTML:
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>
CSS:
p {
border-width: 10px;
width: 100px;
float: left;
padding: 20px;
margin: 20px;
}
p.one {
border-style: solid;
border-color: #ff0000;
}
p.two {
border-style: solid;
border-color: #ff0000 #00ff00;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}
Kết quả ta được như sau:
Lưu ý: Thuộc tính border-width hoặc border-color trong CSS không hoạt động nếu nó được sử dụng một mình. Sử dụng thuộc tính border-style để thiết lập kiểu đường viền trước tiên.
Cách viết tắt thuộc tính border trong CSS
Thuộc tính border trong CSS là thuộc tính cho phép viết tắt để thiết lập một hoặc nhiều thuộc tính đường viền riêng lẻ là border-width, border-style và border-color trong một dòng code duy nhất.
Hãy xem ví dụ sau để hiểu cách nó hoạt động:
HTML:
<p>Cách viết tắt thuộc tính border</p>
CSS:
p {
border: 5px solid #003999;
background: #fff;
padding: 20px;
margin: 20px;
}
Nếu giá trị cho một thuộc tính đường viền riêng lẻ bị bỏ qua hoặc không được chỉ định trong khi viết tắt, giá trị mặc định cho thuộc tính đó sẽ được sử dụng thay thế, nếu có.
Ví dụ: Nếu giá trị cho thuộc tính border-color bị thiếu hoặc không được chỉ định khi thiết lập đường viền, thì thuộc tính color của phần tử sẽ được sử dụng làm giá trị cho màu đường viền.
Trong ví dụ bên dưới, đường viền sẽ là một đường nét liền nét màu đỏ có chiều rộng 5 pixel:
HTML:
<p>Cách viết tắt thuộc tính border</p>
CSS:
p {
color: red;
border: 5px solid;
background: #fff;
padding: 20px;
margin: 20px;
}
Tuy nhiên, trong trường hợp của border-style, việc bỏ qua giá trị sẽ khiến không có đường viền nào hiển thị vì giá trị mặc định cho thuộc tính này là none.
Như trong ví dụ sau sẽ không có đường viền:
HTML:
<p>Không có đường viền vì border-style mặc định là none</p>
CSS:
p {
border: 5px #003999;
background: yellow;
padding: 20px;
margin: 20px;
}
Như vậy, qua bài viết này, mình đã giúp bạn biết được các thuộc tính trong CSS sử dụng để thiết lập kiểu cho đường viền (border) của phần tử.
Chúc bạn học tốt!
Học tiếp: (Updating…)
Đọc thêm: Padding trong CSS