Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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é

                    Cách sử dụng thuộc tính border-radius cho hai góc
                    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