Đường viền (border) trong CSS là một thuộc tính quan trọng giúp tạo khung và làm nổi bật các phần tử trên trang web. Trong bài viết này, chúng ta sẽ khám phá các thuộc tính của đường viền như border-width, border-style, border-color, và cách kết hợp chúng để tạo nên các hiệu ứng viền đẹp mắt. Việc sử dụng hiệu quả đường viền sẽ giúp bạn cải thiện tính thẩm mỹ và định hình rõ ràng cho nội dung của trang web. Hãy cùng tìm hiểu chi tiết trong bài học này!

1. Tổng quan về thuộc tính border trong CSS

border là thuộc tính CSS dùng để thiết lập viền xung quanh phần tử HTML. Bạn có thể kiểm soát nhiều khía cạnh của viền như:

  • border-width: Độ dày của viền.
  • border-style: Kiểu dáng của viền.
  • border-color: Màu sắc của viền.

Cú pháp cơ bản:

css
element {
    border: border-width border-style border-color;
}

Ví dụ:

css
div {
    border: 2px solid black; /* Viền dày 2px, kiểu solid, màu đen */
}

Trong ví dụ trên:

  • 2px là độ dày của viền.
  • solid là kiểu viền (đường viền liên tục).
  • black là màu viền.

2. Các thuộc tính con của border

Bạn có thể sử dụng các thuộc tính con của border để tùy chỉnh từng khía cạnh riêng biệt của viền. Các thuộc tính con bao gồm:

2.1. Thuộc tính border-width

border-width chỉ định độ dày của viền. Bạn có thể sử dụng các đơn vị như px, em, hoặc sử dụng các từ khóa như thin, medium, và thick.

Cú pháp:

css
border-width: value;

Ví dụ:

css
div {
    border-width: 5px;
}

2.2. Thuộc tính border-style

border-style chỉ định kiểu dáng của viền. Đây là thuộc tính bắt buộc khi bạn muốn thêm viền vào phần tử, vì nếu không có border-style, viền sẽ không hiển thị.

Các giá trị phổ biến của border-style:

  • solid: Đường viền liên tục.
  • dashed: Đường viền gạch ngang.
  • dotted: Đường viền chấm nhỏ.
  • double: Đường viền đôi.
  • groove: Viền tạo cảm giác rãnh chìm.
  • ridge: Viền tạo cảm giác gờ nổi.
  • inset: Viền chìm.
  • outset: Viền nổi.
  • none: Không có viền.
  • hidden: Tương tự như none, nhưng dùng cho các trường hợp đặc biệt.

Ví dụ:

css
div {
    border-style: dashed;
}

2.3. Thuộc tính border-color

border-color chỉ định màu sắc của viền. Bạn có thể sử dụng tên màu, mã HEX, giá trị RGB, RGBA hoặc HSL để chỉ định màu.

Cú pháp:

css
border-color: value;

Ví dụ:

css
div {
    border-color: red; /* Viền màu đỏ */
}

Nếu bạn không chỉ định border-color, màu mặc định của viền sẽ là màu chữ (text color) của phần tử.

3. Viền cho từng cạnh: border-top, border-right, border-bottom, border-left

Bạn có thể thiết lập viền riêng cho từng cạnh của phần tử bằng cách sử dụng các thuộc tính cụ thể cho từng cạnh: border-top, border-right, border-bottom, và border-left.

Ví dụ:

css
div {
    border-top: 5px solid red;    /* Viền trên 5px, màu đỏ */
    border-right: 10px dashed blue; /* Viền phải 10px, gạch ngang, màu xanh */
    border-bottom: 3px dotted green; /* Viền dưới 3px, chấm nhỏ, màu xanh lá */
    border-left: 7px double purple;  /* Viền trái 7px, viền đôi, màu tím */
}

Chỉ định viền cho từng cạnh qua border-width, border-style, border-color

Bạn cũng có thể sử dụng các thuộc tính border-top-width, border-right-style, border-left-color, v.v... để kiểm soát chi tiết từng khía cạnh của viền cho từng cạnh.

Ví dụ:

css
div {
    border-top-width: 5px;
    border-right-style: dashed;
    border-left-color: green;
}

4. Bo tròn viền: Thuộc tính border-radius

border-radius là thuộc tính giúp bạn tạo viền bo tròn cho các phần tử. Bạn có thể làm bo tròn tất cả các góc hoặc chỉ định góc cụ thể.

Cú pháp:

css
border-radius: value;
  • value có thể là một giá trị đơn (áp dụng cho tất cả các góc) hoặc bốn giá trị (áp dụng lần lượt cho các góc trên trái, trên phải, dưới phải, và dưới trái).

Ví dụ bo tròn tất cả các góc:

css
div {
    border: 2px solid black;
    border-radius: 15px;
}

Ví dụ bo tròn từng góc riêng biệt:

css
div {
    border: 2px solid black;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 50px;
}

Trong ví dụ này, chỉ góc trên bên trái và góc dưới bên phải được bo tròn với các giá trị khác nhau.

Tạo hình tròn hoặc hình bầu dục:

Nếu bạn đặt giá trị border-radius bằng 50% và phần tử có chiều cao và chiều rộng bằng nhau, phần tử sẽ trở thành hình tròn.

Ví dụ:

css
div {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%;
}

Kết quả: Phần tử div trở thành một hình tròn màu xanh.

5. Viền hình ảnh: Thuộc tính border-image

border-image cho phép bạn sử dụng một hình ảnh làm viền cho phần tử thay vì sử dụng các kiểu viền đơn giản như solid, dotted, hay dashed. Đây là một thuộc tính mạnh mẽ giúp tạo ra các thiết kế viền độc đáo.

Cú pháp:

css
border-image: url('path-to-image') slice stretch repeat;
  • url('path-to-image'): Đường dẫn đến hình ảnh.
  • slice: Cắt hình ảnh thành các phần.
  • stretch, repeat, round: Chỉ định cách hình ảnh được điều chỉnh cho phù hợp với viền.

Ví dụ:

css
div {
    border: 10px solid;
    border-image: url('border-image.png') 30 stretch;
}

Trong ví dụ trên, hình ảnh border-image.png sẽ được sử dụng làm viền cho phần tử div. Hình ảnh sẽ được cắt và co giãn theo kiểu stretch để phù hợp với viền.

6. Các thuộc tính viền khác

6.1. Thuộc tính outline

outline là một thuộc tính tương tự như border, nhưng outline không ảnh hưởng đến kích thước và bố cục của phần tử. Nó nằm ngoài viền (nếu có), và thường được sử dụng để làm nổi bật phần tử khi nó được focus (như khi người dùng nhấn vào một ô nhập liệu).

Cú pháp:

css
outline: outline-width outline-style outline-color;

Ví dụ:

css
input:focus {
    outline: 2px dashed blue;
}

Khi người dùng nhấn vào ô nhập liệu (input), viền ngoài của nó sẽ có màu xanh với kiểu viền gạch ngang.

6.2. Thuộc tính border-collapse

border-collapse được sử dụng trong bảng HTML để quyết định cách các đường viền của các ô bảng được hiển thị.

Các giá trị của border-collapse:

  • collapse: Các viền của các ô bảng sẽ bị gộp lại.
  • separate: Mỗi ô bảng có viền riêng biệt.

Ví dụ:

css
table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
}

Trong ví dụ này, viền của các ô bảng sẽ bị gộp lại để tạo ra viền duy nhất giữa các ô.

7. Ví dụ hoàn chỉnh về các thuộc tính viền

css
div {
    width: 300px;
    height: 150px;
    border: 5px solid black;
    border-radius: 10px;
    background-color: lightgray;
    border-image: url('images/border-pattern.png') 30 round;
}

Giải thích:

  • border: 5px solid black: Viền dày 5px, kiểu solid, màu đen.
  • border-radius: 10px: Các góc của phần tử được bo tròn 10px.
  • background-color: lightgray: Màu nền của phần tử là màu xám nhạt.
  • border-image: Hình ảnh được sử dụng làm viền với kiểu lặp round.

8. Kết luận

Viền trong CSS là công cụ mạnh mẽ để làm nổi bật và phân chia các phần tử trên trang web. Từ việc tạo viền đơn giản với màu sắc và kiểu dáng khác nhau, đến các kỹ thuật phức tạp như bo tròn góc và sử dụng hình ảnh làm viền, bạn có rất nhiều lựa chọn để sáng tạo và tùy chỉnh giao diện web của mình. Hãy thử nghiệm các thuộc tính border, border-radius, và border-image để tạo ra các thiết kế ấn tượng và chuyên nghiệp.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng viền trong CSS. Chúc bạn thành công trong việc áp dụng các kiến thức này vào các dự án của mình!