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)

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