Cách tạo đường viền bằng icon trong CSS

Như các bạn đã biết, CSS cho phép chúng ta có thể style website theo cách mà mình muốn và nó là một phần không thể thiếu nếu bạn đang muốn phát triển một website. Kể từ khi lên CSS3 ra đời, nó cung cấp cho chúng ta thêm rất nhiều thuộc tính hay và thú vị. Điều đó giúp chúng ta thoả sức sáng tạo và biến website của chúng ta thành một bức tranh nghệ thuật. Ngày hôm nay, mình sẽ giới thiệu cho các bạn về một thuộc tính rất hay trong CSS3 mà mọi người thường ít dùng nó, đó là border-image.

Trước khi đi sau vào thuộc tính này, mình muốn nói qua đôi chút về thuộc tính cơ bản mà rất nhiều website đang sử dụng đó là border. Chúng ta vẫn thường sử dụng thuộc tính này để vẽ một đường viền bao quanh có độ dày và màu sắc. Ví dụ:

border: 1px solid black;

Tuy nhiên, liệu chúng ta có thể thay đổi được hình thù của đường viền đó không, thay vì chỉ có solid, dotted, dashed, ... Tất nhiên là được rồi, bởi vì CSS3 cung cấp cho chúng ta thêm một thuộc tính để vẽ đường viền bằng hình ảnh, đó là border-image.

Tài liệu tham khảo: https://www.w3schools.com/cssref/css3_pr_border-image.asp