Thuộc tính Border trong CSS

Chào bạn, Hôm nay chúng ta sẽ tới bài học CSS vô cùng hay và quan trọng trong quá trình bạn quản lý hay phát triển website. Đó là:

Sử dụng Border trong CSS

Các thuộc tính border trong CSS giúp bạn có thể tuỳ chỉnh kiểu border, độ rộng, màu sắc của các border

css-border

Kiểu Border trong CSS

Khai báo các thuộc tính của Border: border-style: giá trị. Các giá trị của Border:

  • dotted: border nét chấm ngắn
  • dashed: border nét chấm dài
  • solid: border nét liền
  • double: border có đường viền kép
  • groove: border có đường viền 3d
  • ridge: border có đường viền 3d bên sườn
  • inset: border có đường viền 3d chìm
  • outset: border có đường viền 3d nổi
  • none: không có đường viền
  • hidden: đường viền ẩn

Trong thuộc tính border-style có thể có nhiều giá trị như: top border, right border, botton border, left border)

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;}

Hiển thị sẽ như thế này:border-css Độ rộng Border trong CSS

Độ rộng thuộc tính border-width có 4 đường border. Như vậy bạn có thể cài đặt giá trị kích thước đặc biệt như (px, pt, cm, em, …) hoặc sử dụng 1 trong 3 kiểu định nghĩa mặc định: thin (mỏng), medium (bình thường), thíck (dày)

Giá trị của thuộc tính border-width có thể có 4 giá trị khác nhau: top border,right border, botton border, left border

Ví dụ:

border-css1

Thuộc tính màu sắc cho Border trong CSS

Thuộc tính border-color được sử dụng để cài đặt màu sắc cho border. Bạn có thể chọn giá trị cài đặt cho màu sắc với các kiểu giá trị dưới đây:

  • theo tên: ví dụ như Red
  • theo mã HEX: ví dụ như #ff0000
  • theo mã RGB: ví dụ rgb(255,0,0)
  • trong suốt: transparent

Để hiểu hơn về các kiểu màu sắc, bạn có thể đọc thêm bài: Tìm hiểu màu sắc trong CSS

Tương tự như trên bạn có 4 lựa chọn giá trị màu sắc cho 4 vị trí border: top border, right border, botton border, left border

Nếu thuộc tính border-color không được cài đặt thì nó sẽ được thừa hưởng giá trị từ thẻ.

Ví dụ:

border-css2

Thuộc tính riêng Border Side trong CSS

Ở ví dụ dưới đây bạn có thể thấy rằng chúng ta dễ dàng CSS cho các border theo mặt (side) một cách đơn giản.

border-css3

Một cách viết Code tối giản hơn mà vẫn mang lại giá trị như trên:

border-css4

ở ví dụ này border-style: giá trị 1 giá trị 2; giá trị 1 áp dụng top border và botton border còn giá trị 2 áp dụng cho right border và left border (đây chính là Side)

Do vậy đây là cách cài đặt giá trị cho thuộc tính border-sytle:

+) border-style: dotted solid double dashed; (thuộc tính có 4 giá trị)

  • top border: dotted
  • right border: solid
  • botton border: double
  • left border: dotted

+) border-style: dotted solid double; (thuộc tính có 3 giá trị)

  • top border :dotted
  • right border và left border: solid
  • botton border: double

+) border-style:dotted solid ;(thuộc tính 2 giá trị)

  • top border và botton border: dotted
  • right border và left border: solid

+) border-style: solid ;(thuộc tính có 1 giá trị)

  • top, right, botton, left border: solid

Cách thực hiện như trên áp dụng với thuộc tính border-width và border-color

Sử dụng thuộc tính Shorthand Border trong CSS

Ở ví dụ bên trên bạn có thể thấy rằng có rất nhiều thuộc tính được áp dụng với border như: border-width, border-color, border-style

Để tiết kiệm thời gian và giảm số lượng dòng Code bạn có thể sử dụng Shorthand để khai báo các thuộc tính cho border.

Đây là cấu trúc: border: x y z; trong đó

  • x: border-width: có cũng được, không có cũng được
  • y: border-style: bắt buộc phải có
  • z: border-color: có cũng được, không có cũng được

border-css5

Bạn cũng có thể cấu hình giá trị cho thuộc tính border đặc biệt như:

border-css6

Sử dụng thuộc tính Rounded Border trong CSS

Thuộc tính border-radius được sử dụng để bo tròn góc của border trong CSS

Ví dụ:

border-css7

Chú ý: thuộc tính border-radius không hỗ trợ trên IE8 và các phiên bản trước đó

Tổng kết lại CSS Border chúng ta có 4 thuộc tính dưới đây và bạn nên sử dụng Shorthand Code:

  • border-style
  • border-color
  • border-width
  • border-radius

Bạn cần thực hành các thuộc tính này thành thạo kết hợp với các giá trị của nó và shorthhand code trước khi tới bài sau của Seri tự học CSS tại nhà.

Chúc bạn vui vẻ!