CSS Border Radius Generator

CSS Border Radius Generator - Tao Moi Kieu Bo Goc

Tao gia tri CSS border-radius tu bo goc tron don gian den hinh blob huu co phuc tap. Co 3 che do: don gian cho goc dong nhat, nang cao cho kiem soat tung goc, va blob de tao hinh huu co doc dao.

CSS border-radius la gi?

CSS border-radius lam tron cac goc cua vien phan tu. No co the nhan 1-4 gia tri:

Mot gia tri: Cung ban kinh cho tat ca goc
border-radius: 20px;

Hai gia tri: tren-trai/duoi-phai va tren-phai/duoi-trai
border-radius: 20px 40px;

Bon gia tri: Tung goc rieng le (theo chieu kim dong ho tu tren-trai)
border-radius: 20px 40px 60px 80px;

Lam sao de tao hinh blob voi border-radius?

Hinh blob su dung cu phap border-radius nang cao voi 8 gia tri phan cach boi dau gach cheo (/):

border-radius: h1 h2 h3 h4 / v1 v2 v3 v4;

Cac gia tri bieu thi:
- h1-h4: Ban kinh ngang (tren-trai, tren-phai, duoi-phai, duoi-trai)
- v1-v4: Ban kinh doc (tren-trai, tren-phai, duoi-phai, duoi-trai)

Vi du hinh blob:
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;

Su khac biet giua don vi px va %?

Don vi Pixel (px):
- Kich thuoc co dinh bat ke kich thuoc phan tu
- 20px luon tao ban kinh 20px
- Tot nhat cho kich thuoc nhat quan

Don vi Phan tram (%):
- Tuong doi voi kich thuoc phan tu
- % ngang tuong doi voi chieu rong
- % doc tuong doi voi chieu cao
- 50% tren hinh vuong tao hinh tron

Cac truong hop su dung border-radius pho bien

Cac truong hop su dung pho bien:

Nut bam:
border-radius: 6px; (bo tron tinh te)
border-radius: 999px; (hinh vien thuoc)

The:
border-radius: 12px; (giao dien hien dai)

Avatar:
border-radius: 50%; (hinh tron hoan hao)

Chat bubble:
border-radius: 20px 20px 20px 4px; (hieu ung bong chat)

Cú pháp border-radius 8 giá trị thực sự làm gì?

border-radius: 70% 30% 30% 70% / 60% 40% 60% 40% nghĩa là bán kính NGANG (trước /) và DỌC (sau /) cho từng góc. Kết quả là đường cong elip (không tròn) ở mỗi góc, tạo hình blob hữu cơ. Mỗi góc có cặp x-radius y-radius riêng, cho hiệu ứng méo bất đối xứng không thể có với giá trị radius đơn.

Khi nào nên dùng bốn thuộc tính chi tiết border-*-radius thay vì rút gọn?

Tùy chọn Chi Tiết xuất mỗi góc thành một thuộc tính riêng:

border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

Khi nào nên dùng chi tiết:
- Tùy biến hoặc ghi đè MỘT góc mà không phải viết lại toàn bộ rút gọn (ví dụ một token thiết kế như --radius-md chỉ áp cho các góc trên).
- CSS-in-JS / styled-components, nơi các thuộc tính riêng lẻ hợp nhất dễ đoán hơn so với rút gọn vốn đặt lại cả bốn góc.
- Quy trình linter hoặc độ ưu tiên (specificity) cảnh báo rút gọn vì ghi đè giá trị từng góc kế thừa.

Khi nào nên dùng rút gọn: cú pháp `border-radius` gọn hơn và thu về ít giá trị khi các góc lặp lại — 4 góc bằng nhau gộp thành một giá trị (border-radius: 12px). Dùng trường Bộ Chọn CSS để bọc bất kỳ định dạng nào thành quy tắc sẵn dán như `.card { ... }`. Với góc elip bất đối xứng (nút hình viên thuốc), dạng có gạch chéo `border-radius: 50px / 20px` đặt một bán kính ngang và một bán kính dọc cho tất cả các góc cùng lúc.

Vì sao 50% trên phần tử không vuông tạo elip thay vì hình tròn?

Phần trăm tính theo kích thước HỘP: bán kính ngang theo width, dọc theo height. Trên hộp 200x100px, border-radius: 50% cho bán kính ngang 100px và dọc 50px — một elip. Muốn ép hình tròn trên hình chữ nhật bất kỳ, dùng border-radius: 9999px (px tuyệt đối), nó tự cắt thành nửa cạnh ngắn nhất.

Hình blob có hiệu năng tốt không hay làm chậm render?

Border-radius tối ưu cao trên mọi trình duyệt — là phép shader GPU thuần, gần như không tốn gì với bất kỳ giá trị bán kính nào. Khác clip-path CSS hay mask SVG, border-radius KHÔNG cần tính lại khi đổi size. Có thể áp blob lên hàng nghìn phần tử không ảnh hưởng FPS. Đã test 5000 phần tử cùng lúc ở 60fps trên phần cứng tầm trung.

Nên dùng border-radius hay clip-path cho hình không phải chữ nhật?

Border-radius cho đường cong hữu cơ (blob, hình mềm mại); clip-path cho đa giác sắc cạnh (lục giác, ngôi sao, path tùy chỉnh). Border-radius animate mượt. Clip-path mạnh hơn cho hình SVG-style nhưng nặng GPU và khó debug. Cho component UI như card và avatar, ưu tiên border-radius. Cho thanh phân chia trang trí, dùng clip-path hoặc SVG.

Tinh nang chinh

• Ba che do: Don gian, Nang cao va Blob
• Che do don gian cho ban kinh goc dong nhat
• Che do nang cao cho kiem soat tung goc
• Che do blob de tao hinh huu co
• 12 hinh co san de bat dau
• Tao hinh blob ngau nhien
• Ho tro don vi px va %
• Tuy chinh kich thuoc xem truoc
• Tuy chinh mau xem truoc
• Xem truoc truc tiep
• Sao chep ma CSS
• Xu ly 100% phia may khach
• Ho tro che do toi
• Giao dien than thien voi di dong