Đường viền cho các cạnh riêng biệt trong CSS

Cũng tồn tại các thuộc tính viết tắt cho từng cạnh riêng biệt: border-left (đường viền trái), border-right (đường viền phải), border-top (đường viền trên), border-bottom (đường viền dưới).

Hãy tạo chỉ đường viền bên trái cho phần tử bằng thuộc tính border-left:

html<div id="elem"></div>
css#elem {
  width: 300px;
  height: 100px;
  border-left: 1px solid red;
}

Результат:

Và bây giờ hãy đồng thời tạo cả đường viền trái và đường viền phải:

html<div id="elem"></div>
css#elem {
  width: 300px;
  height: 100px;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

Результат:

Задание 1

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

Задание 2

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