Tạo viền CSS
Xem trước độ dày, kiểu, bo góc, màu viền rồi sao chép CSS.
Xem trực tiếp
Độ dày: 2px
Bo góc: 12px
CSS đầu ra
border: 2px solid #6366F1;
border-radius: 12px;
Vì sao dùng bộ tạo viền?
Độ dày, kiểu, radius và màu dễ đánh giá trên hộp sống hơn rule thô. Sao chép border và border-radius cùng lúc, rồi đổi thuộc tính logic nếu codebase ưa chúng. Chỉ một radius — bốn góc hữu cơ là sửa tay. Đổi sang phần trăm khi đường cong phải theo kích thước hộp; 50% là elip (hình tròn trên hình vuông). Outline và border-image ngoài phạm vi.
Viền phổ biến
Dữ liệu của bạn được giữ riêng tư
CSS viền được tạo trên trình duyệt. Không tải lên hoặc lưu trên máy chủ.
Về xem trước viền CSS
CSS Border Generator xem trước độ dày, kiểu, radius và màu, rồi sao chép CSS border và border-radius. Đây là sân chơi cục bộ cho nút và thẻ. Không xuất outline, không viền ảnh, không viết thuộc tính logic (border-inline) trừ khi bạn tự sửa snippet.
Radius là một giá trị trong panel này, không phải bốn góc — hãy tự mở rộng cho hình hữu cơ. Dùng pixel cho góc cố định, hoặc phần trăm để đường cong theo kích thước hộp (50% là elip). Style gồm các từ khóa CSS preview có thể hiện. Ghép Shadow Generator cho độ nổi và Color Picker cho màu nét.
Liên quan: Gradient Generator, CSS Formatter, Color Converter.
Cách tạo viền
Đặt độ dày, kiểu và radius
Chỉnh độ dày và kiểu, rồi đặt radius bằng pixel hoặc phần trăm. Preview sống cập nhật khi bạn đổi từng điều khiển.
Chọn màu
Sao chép border và border-radius cùng lúc hoặc tách tùy nhu cầu.
Dán vào stylesheet
Đổi sang thuộc tính logic nếu codebase ưa chúng.
Ở lại máy
Không tải lên. Shadow Generator thêm độ nổi cạnh nét.
Công cụ liên quan
Chọn màu
Chọn màu và sao chép HEX, RGB, HSL.
Chọn màu từ ảnh
Mở ảnh, di chuột để phóng pixel, sao chép HEX, RGB và HSL. Không tải lên.
Tạo gradient
Tạo CSS linear-gradient với xem trước trực tiếp.
Tạo box-shadow
Chỉnh box-shadow và sao chép CSS.
Chuyển màu
Chuyển màu giữa HEX, RGB và HSL. Gõ hoặc dán bên dưới — cả ba định dạng cập nhật khi bạn gõ.
Hỏi đáp Tạo viền CSS
Panel dùng một radius, bằng pixel hoặc phần trăm. Phần trăm theo kích thước hộp, nên 50% là elip (hình tròn trên hình vuông). Tự mở thành border-radius bốn giá trị. Không xuất outline hay border-image.
Sao chép border và border-radius vật lý. Đổi sang border-inline nếu codebase ưa CSS logic.
Không. Preview và CSS ở lại trình duyệt.