Cách sử dụng thuộc tính border-radius cho hai góc

Thuộc tính border dùng để định dạng các dạng bo góc của border ngoài mà bạn vẫn thường sử dụng để bo góc cho một class hay 1 id nào đó. Các bạn tham khảo bài viết Thuộc tính border-radius của trang hocwebchuan. Tuy nhiên bạn đã biết cách sử dụng kết hợp bo hai góc chưa? Bạn xem hướng dẫn của mình bên dưới nhé

Hình minh họa bo tròn 2 góc dưới với kích thước 4px

Ví dụ khi bạn sử dụng hai thành phần class hoặc id kết hợp chẳng hạn như khung tìm kiếm bên trái input và bên phải button nếu sử dụng thuộc tính border-radius bo tròn 2 góc trái của input và 2 góc phải của class button.

Bạn có thể sử dụng như hocwebchuan hướng dẫn tuy nhiên làm vậy nó dài bạn có thể kết hợp như mình hướng dẫn dưới đây ví dụ mình thêm thuộc tính boder-radius bo tròn với kích thước 4px như sau:

4px 4px 0 0: 2 góc trên
0 0 4px 4px: 2 góc dưới
0 4px 4px 0: 2 góc bên phải
4px 0 0 4px: 2 góc bên trái
4px 0 4px 0: 2 góc chéo phía trên bên trái và phía dưới bên phải
0 4px 0 4px: 2 góc chéo phía dưới bên trái và phía trên bên phải

Bạn hãy nhớ thuộc tính sủ dụng kết hợp theo thứ tự top - right - bottom - left của bất cứ thuộc tính nào. Vâng bài chỉ có thế thôi 😂

Chấm hết bài!!!

Nội dung chính