Tạo border radius

Cách hoạt động

border-radius thì đơn giản cho đến khi bạn muốn bo ba góc và để một góc vuông, lúc đó ai cũng phải tra lại thứ tự của bốn giá trị.

Thứ tự, nhớ một lần cho xong

Trên trái, trên phải, dưới phải, dưới trái, theo chiều kim đồng hồ bắt đầu từ góc trên bên trái. Cùng thứ tự theo chiều kim đồng hồ từ góc trên bên trái này cũng áp dụng cho các thuộc tính viết tắt margin, padding và border, nên đáng để ghi nhớ một lần.

Pixel hoặc phần trăm

Pixel cho cùng một độ cong dù phần tử có kích thước nào. Phần trăm tính theo chiều rộng và chiều cao của chính phần tử, nên độ cong thay đổi theo, và bán kính 50% trên hình vuông cho ra hình tròn hoàn hảo, đây là mẹo chuẩn để làm ảnh đại diện tròn.

Hình viên thuốc

Bán kính lớn hơn một nửa chiều cao phần tử sẽ bị giới hạn đúng bằng một nửa, đó là lý do border-radius: 999px luôn tạo ra hình viên thuốc dù chiều cao là bao nhiêu. Cách này vững chắc hơn việc tính giá trị chính xác, vì nó vẫn hoạt động khi nội dung thay đổi.

Khi các góc trông sai ở các phần tử lồng nhau

Một hộp bo góc nằm trong hộp bo góc khác cần bán kính nhỏ hơn ở hộp bên trong, giảm đi đúng bằng phần padding giữa hai hộp, nếu không các đường cong sẽ không đồng tâm. Đó là chi tiết nhỏ giúp các thẻ trông được làm cẩn thận.