Trình tạo Border Radius CSS
Tạo các giá trị border-radius phức tạp trong CSS một cách trực quan. Kiểm soát độc lập từng góc.
border-radius: 20px 20px 20px 20px;
Cách sử dụng công cụ này
- 1
Drag the TL, TR, BR, and BL sliders to set each corner radius in pixels (0 to 100).
- 2
Watch the indigo preview box update live as you change each corner.
- 3
Read the generated border-radius declaration in the code box below the sliders.
- 4
Click Copy CSS to put the declaration on your clipboard, then paste it into your stylesheet.
Trình tạo Border Radius CSS là gì?
Thuộc tính border-radius của CSS chấp nhận tối đa bốn giá trị, mỗi giá trị cho một góc, theo thứ tự trên trái, trên phải, dưới phải và dưới trái. Hãy kết hợp các bán kính khác nhau để tạo các hình dạng hữu cơ kiểu giọt nước, các thẻ bất đối xứng hoặc các kiểu bong bóng hội thoại. Công cụ này cho phép bạn điều chỉnh từng góc bằng các thanh trượt và xem kết quả theo thời gian thực.
Các trường hợp sử dụng phổ biến
Rounding the corners of a card or panel component and copying the exact pixel value into a stylesheet.
Creating an asymmetric shape, like a chat bubble, by giving one corner a small radius and the others a larger one.
Prototyping a pill or capsule button by pushing all four sliders toward their maximum.
Matching a design spec that calls for different radii on the top corners versus the bottom corners.
Quickly testing how a corner radius looks at different pixel sizes before committing a value to a design system.
Teaching or demonstrating how the four-value border-radius shorthand maps to each corner.
Câu hỏi thường gặp
Còn các bán kính dạng elip thì sao?▼
Công cụ liên quan
Trình chuyển đổi màu (HEX/RGB/HSL)
Chuyển đổi màu giữa các định dạng HEX, RGB và HSL. Chọn màu trực quan hoặc nhập các giá trị thủ công.
Trình tạo Box Shadow CSS
Tạo các giá trị box-shadow trong CSS một cách trực quan. Xem trước theo thời gian thực và sao chép CSS được tạo ra.
Bộ tạo dải màu chuyển sắc CSS
Tạo các dải màu chuyển sắc CSS dạng tuyến tính và tỏa tròn. Chọn màu một cách trực quan và sao chép đoạn CSS được tạo ra.
Bộ tạo đường cong gia tốc Cubic Bezier
Tạo các đường cong gia tốc cubic-bezier cho CSS. Bao gồm các giá trị cài sẵn theo chuẩn.
Trình tạo bảng màu
Tạo các bảng màu hài hòa từ bất kỳ màu cơ sở nào. Hỗ trợ các sơ đồ màu bổ túc, tương đồng, bộ ba và đơn sắc.
Trình tạo CSS Clamp()
Tạo các giá trị CSS linh hoạt và đáp ứng với clamp(). Co giãn mượt mà giữa kích thước tối thiểu và tối đa trên các khoảng của viewport.