Những công cụ lập trình bạn dùng mỗi ngày, gom lại một chỗ.

Bộ chuyển đổi, bộ định dạng, hàm băm, bộ kiểm tra và những tiện ích nhỏ bạn cứ mở đi mở lại nay nằm chung một nơi thay vì thất lạc khắp các tab.

GitHub

/ Công cụ

■

/ Tìm công cụ

109 công cụ

/ Trình tạo Border Radius

Đơn vị

Mẫu có sẵn

Liên kết tất cả các góc

Trên trái: 12px

Trên phải: 12px

Dưới trái: 12px

Dưới phải: 12px

Màu xem trước

Kích thước xem trước: 150px

Xem trước

Mã CSS

Thuộc tính từng góc

Class Tailwind

/ Công cụ đã chọn

■

Trình tạo Border Radius - công cụ tạo miễn phí

Trình tạo border-radius CSS trực quan với điều khiển từng góc riêng lẻ

■ 01

CSS Border Radius là gì?

Thuộc tính CSS border-radius bo tròn các góc của cạnh viền ngoài của một phần tử. Bạn có thể đặt cả bốn góc cùng một giá trị, hoặc chỉ định các giá trị khác nhau cho từng góc để tạo những hình dạng độc đáo.

■ 02

Nó hoạt động như thế nào?

Border radius có thể được chỉ định bằng 1 đến 4 giá trị. Với 1 giá trị, tất cả các góc giống nhau. Với 2 giá trị, giá trị đầu áp dụng cho trên-trái/dưới-phải và giá trị thứ hai cho trên-phải/dưới-trái. Với 3 giá trị: trên-trái, trên-…

■ 03

Các trường hợp mẫu

Bao gồm Tất cả các góc bằng nhau, Hình viên thuốc và Các góc khác nhau để bạn có thể nhanh chóng so sánh các đầu vào và đầu ra thông dụng.

/ Công cụ liên quan

/ Mã nguồn

■

Mã nguồn từ công cụ đã chọn, hiển thị ở đây bên cạnh phiên bản trực tiếp ở bên phải.

/ Mã nguồn

TypeScript

typescript

// No external dependencies needed - generates CSS border-radius strings

interface BorderRadius {
  topLeft: number;
  topRight: number;
  bottomRight: number;
  bottomLeft: number;
  unit: 'px' | '%' | 'rem';
}