Thuộc tính viết tắt cho đường viền trong CSS

Cũng giống như với phông chữ, đối với đường viền cũng tồn tại một thuộc tính viết tắt border, mà chúng ta có thể sử dụng thay vì viết 3 thuộc tính khác nhau cho độ dày, màu sắc và kiểu đường viền. Trong thuộc tính này chúng ta có thể đơn giản liệt kê các giá trị cho đường viền theo bất kỳ thứ tự nào.

Hãy xem qua một ví dụ. Giả sử chúng ta có một đường viền như thế này:

css#elem {
  border-width: 1px;
  border-style: solid;
  border-color: black;
  width: 300px;
  height: 100px;
}

Hãy viết lại nó thông qua thuộc tính viết tắt:

css#elem {
  border: 1px solid red;
  width: 300px;
  height: 100px;
}
Задание 1

Lặp lại trang theo mẫu này:

Задание 2

Lặp lại trang theo mẫu này:

Задание 3

Lặp lại trang theo mẫu này:

Задание 4

Lặp lại trang theo mẫu này: