Tạo border-radius tùy chỉnh cho từng góc
border-radius: 16px;
Công cụ Border Radius Generator của Tấn Phát Digital là giải pháp hoàn hảo cho frontend developers và UI/UX designers cần tạo CSS border-radius với giao diện trực quan và chuyên nghiệp. Tùy chỉnh từng góc riêng biệt (top-left, top-right, bottom-right, bottom-left) hoặc liên kết tất cả các góc để điều chỉnh đồng thời với một slider duy nhất. Hỗ trợ đầy đủ cả hai đơn vị px (pixels - giá trị cố định) và % (percentage - tương đối với kích thước element). 6 preset shapes có sẵn được thiết kế sẵn cho các use cases phổ biến: Rounded (16px - classic rounded corners), Pill (100px - capsule shape cho buttons và tags), Blob 1 và Blob 2 (organic asymmetric shapes cho decorative elements), Ticket (asymmetric với góc dưới tròn hơn), và Drop (water drop shape với một góc vuông). Preview realtime với gradient đẹp mắt giúp visualize kết quả ngay lập tức khi điều chỉnh. Copy CSS code với một click vào clipboard, sẵn sàng paste vào stylesheet của bạn. Công cụ xử lý hoàn toàn offline trên trình duyệt, không gửi data lên server, đảm bảo bảo mật và privacy. Hoàn toàn miễn phí, không cần đăng ký tài khoản, không giới hạn số lần sử dụng. Đây là công cụ thiết yếu cho frontend developers khi tạo UI components với rounded corners như buttons, cards, modals, inputs, images, và creative shapes cho modern web design.
Border-radius là CSS property tạo góc bo tròn cho HTML elements, được giới thiệu trong CSS3 và nhanh chóng trở thành một trong những properties được sử dụng nhiều nhất trong modern UI design. Rounded corners tạo cảm giác friendly, approachable, và human-friendly hơn so với sharp corners góc vuông cứng nhắc - đây là nguyên tắc thiết kế được Apple, Google, và hầu hết các tech companies áp dụng trong design systems của họ. Buttons, cards, images, inputs, modals, dropdowns, tooltips - hầu hết UI components trong modern web applications đều sử dụng border-radius ở các mức độ khác nhau. Với khả năng tùy chỉnh từng góc riêng biệt (asymmetric border-radius), bạn có thể tạo ra vô số shapes sáng tạo: pills cho tags và badges, blobs cho decorative elements và backgrounds, asymmetric shapes cho unique brand identity, và creative shapes cho hero sections. Border-radius cũng đóng vai trò quan trọng trong việc tạo visual hierarchy - elements quan trọng hơn thường có border-radius lớn hơn để thu hút attention. Công cụ này giúp visualize và experiment với các giá trị khác nhau một cách trực quan mà không cần viết code, tiết kiệm thời gian trial-and-error đáng kể trong quá trình design và development.
CSS border-radius property có thể nhận từ 1 đến 4 giá trị, mỗi cách viết có ý nghĩa khác nhau. 1 giá trị: áp dụng cho tất cả 4 góc đồng đều (border-radius: 10px tạo 4 góc đều 10px). 2 giá trị: giá trị đầu cho top-left và bottom-right, giá trị sau cho top-right và bottom-left (border-radius: 10px 20px tạo góc chéo đối xứng). 3 giá trị: top-left, top-right và bottom-left, bottom-right (border-radius: 10px 20px 30px). 4 giá trị: top-left, top-right, bottom-right, bottom-left theo chiều kim đồng hồ (border-radius: 10px 20px 30px 40px). Đơn vị px (pixels) tạo giá trị cố định không thay đổi theo element size - phù hợp cho buttons, inputs, cards với kích thước cố định. Đơn vị % (percentage) tương đối với element dimensions - 50% tạo hình tròn hoàn hảo nếu element là square, hoặc ellipse nếu là rectangle. Có thể dùng dấu / để tạo elliptical corners với horizontal và vertical radius khác nhau: border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px tạo các góc oval thay vì tròn đều. Shorthand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius cho phép set từng góc riêng biệt trong CSS.
Rounded (16px all corners): Classic rounded corners phổ biến nhất, phù hợp cho cards, buttons, inputs, modals, và hầu hết UI components. 16px là giá trị 'sweet spot' được nhiều design systems sử dụng (Material Design, Tailwind CSS). Pill (100px all corners): Capsule/pill shape với góc bo tròn hoàn toàn, phổ biến cho tags, badges, pill buttons, chips, và navigation tabs. Giá trị 100px đủ lớn để tạo fully rounded ends cho hầu hết element sizes. Blob 1 (30px 70px 70px 30px): Organic asymmetric shape với góc đối xứng chéo, tạo cảm giác playful và creative. Phù hợp cho decorative elements, hero section backgrounds, avatar frames, và breaking grid monotony. Blob 2 (60px 40px 30px 70px): Asymmetric shape với tất cả 4 góc khác nhau, tạo unique organic feel. Dùng cho creative designs, artistic elements, và brand differentiation. Ticket (8px 8px 32px 32px): Asymmetric với góc dưới tròn hơn góc trên, giống hình dạng vé xem phim hoặc coupon. Phù hợp cho ticket components, coupons, và promotional cards. Drop (50px 50px 0px 50px): Water drop shape với một góc vuông (bottom-left), tạo hiệu ứng như giọt nước. Phù hợp cho callouts, speech bubbles, tooltips, và decorative elements. Experiment với các presets rồi fine-tune để tạo unique shapes phù hợp với brand identity của bạn.
Trong design systems chuyên nghiệp, border-radius được standardize thành các tokens/variables để đảm bảo consistency across toàn bộ application. Ví dụ: --radius-sm: 4px (subtle rounding), --radius-md: 8px (default), --radius-lg: 16px (prominent), --radius-xl: 24px (very rounded), --radius-full: 9999px (pill shape). Material Design 3 sử dụng shape tokens: Extra Small (4dp), Small (8dp), Medium (12dp), Large (16dp), Extra Large (28dp). Tailwind CSS có rounded utilities: rounded-sm (2px), rounded (4px), rounded-md (6px), rounded-lg (8px), rounded-xl (12px), rounded-2xl (16px), rounded-3xl (24px), rounded-full (9999px). Best practices: Sử dụng consistent border-radius values across similar components. Larger elements (cards, modals) thường có larger radius. Smaller elements (buttons, inputs) có smaller radius. Nested elements nên có radius nhỏ hơn parent để tránh visual awkwardness. Avoid mixing too many different radius values trong cùng một interface. Consider accessibility - quá nhiều rounded corners có thể gây khó khăn cho users với visual impairments trong việc identify boundaries.
Elliptical corners với slash syntax: border-radius: 50% / 25% tạo horizontal radius 50% và vertical radius 25%, cho phép tạo oval shapes thay vì circular. Useful cho decorative elements và organic shapes. CSS shapes với border-radius: Kết hợp với width, height, và background để tạo circles (width=height, border-radius: 50%), ovals (width≠height, border-radius: 50%), semi-circles (border-radius: 50% 50% 0 0), quarter circles, và nhiều shapes khác. Animated border-radius: Sử dụng CSS transitions để animate border-radius changes, tạo morphing effects giữa shapes. Ví dụ: hover effect từ square sang circle. Clip-path alternative: Cho complex shapes, clip-path có thể flexible hơn border-radius, nhưng border-radius có better browser support và performance. Responsive border-radius: Sử dụng clamp() hoặc calc() để tạo responsive radius: border-radius: clamp(8px, 2vw, 24px) scales với viewport width. Border-radius với images: Kết hợp với overflow: hidden để crop images thành shapes. Useful cho avatars, thumbnails, và decorative image treatments. Performance considerations: Border-radius rất lightweight, nhưng kết hợp với box-shadow, backdrop-filter, hoặc animations có thể trigger repaints. Sử dụng will-change: transform hoặc transform: translateZ(0) để trigger GPU acceleration khi cần.
px (pixels): Giá trị cố định, consistent across different element sizes. Phù hợp cho buttons, inputs, cards với kích thước cố định hoặc khi bạn muốn exact control. Ví dụ: border-radius: 8px luôn là 8px dù element lớn hay nhỏ. % (percentage): Relative to element dimensions, 50% tạo hình tròn/ellipse. Phù hợp cho avatars, responsive elements, và khi bạn muốn radius scale với element size. Ví dụ: border-radius: 50% trên square element tạo perfect circle, trên rectangle tạo ellipse. Rule of thumb: Dùng px cho UI components (buttons, cards, inputs) và % cho decorative shapes (avatars, blobs). Trong responsive design, có thể combine: border-radius: clamp(8px, 2vw, 24px) để scale với viewport.
Để tạo hình tròn hoàn hảo (perfect circle): Element phải có width = height (square dimensions). Set border-radius: 50% hoặc border-radius: 9999px (pill technique). Nếu element là rectangle (width ≠ height), 50% sẽ tạo ellipse thay vì circle. Với images, thêm overflow: hidden để crop phần thừa và giữ image trong circular boundary. Ví dụ CSS: .circle { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }. Tip: Dùng aspect-ratio: 1/1 trong modern CSS để ensure square dimensions mà không cần explicit width/height.
Border-radius bản thân rất lightweight và hầu như không ảnh hưởng performance. Tuy nhiên, kết hợp với các properties khác có thể gây issues: box-shadow + border-radius: Mỗi shadow cần được calculated cho curved edges, nhiều shadows có thể slow. backdrop-filter + border-radius: Blur effects trên curved areas expensive. Animations trên border-radius: Animate border-radius values triggers layout recalculations. Rất nhiều elements với complex border-radius: Cumulative effect có thể noticeable. Optimization tips: Sử dụng will-change: transform hoặc transform: translateZ(0) để trigger GPU acceleration. Animate transform thay vì border-radius khi possible. Limit số lượng box-shadows trên rounded elements. Consider using SVG hoặc images cho very complex shapes thay vì CSS.
Blob shapes (organic, asymmetric shapes) là major trend trong modern web design từ 2019-present, được popularize bởi các brands như Stripe, Slack, và nhiều tech startups. Use cases phổ biến: Decorative backgrounds cho hero sections và landing pages. Avatar frames để tạo unique, playful feel. Creative buttons và CTAs để stand out. Breaking grid monotony trong layouts. Brand differentiation và visual identity. Illustration backgrounds và decorative elements. Blobs tạo cảm giác playful, creative, human-friendly, và approachable - contrast với corporate, rigid designs. Tuy nhiên, cần sử dụng có chủ đích - quá nhiều blobs có thể gây cluttered và unprofessional. Best practice: 1-2 blob elements per section, consistent style across site.
Có 2 cách để set border-radius cho specific corners: Cách 1 - Shorthand với 4 values: border-radius: 10px 0 0 10px (top-left và bottom-left rounded, top-right và bottom-right square). Thứ tự: top-left, top-right, bottom-right, bottom-left (clockwise). Cách 2 - Individual properties: border-top-left-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 10px; Verbose hơn nhưng clearer và easier to maintain. Common patterns: Rounded top only: border-radius: 10px 10px 0 0. Rounded bottom only: border-radius: 0 0 10px 10px. Rounded left only: border-radius: 10px 0 0 10px. Rounded right only: border-radius: 0 10px 10px 0. Single corner: border-radius: 10px 0 0 0 (top-left only).
Border-radius có excellent browser support và không cần vendor prefixes trong modern browsers. Support: Chrome 4+, Firefox 4+, Safari 5+, Edge 12+, IE 9+, Opera 10.5+. Tất cả modern browsers (2015+) support fully. Vendor prefixes (-webkit-border-radius, -moz-border-radius) chỉ cần cho very old browsers (Chrome <4, Firefox <4, Safari <5) - không còn relevant trong 2024. Caveats: IE 8 và earlier không support border-radius. Một số older mobile browsers có thể có quirks với percentage values. Elliptical corners (slash syntax) có slightly less support nhưng vẫn excellent. Recommendation: Không cần prefixes cho modern projects. Nếu cần support IE 8, consider graceful degradation (square corners) hoặc polyfills.
Công cụ này generate CSS code sẵn sàng sử dụng. Workflow: Adjust sliders hoặc click presets để design shape. Copy CSS code với một click (icon copy). Paste vào stylesheet của project. Apply class hoặc inline style cho elements. Sharing với team: Copy CSS code và paste vào design documentation. Screenshot preview để show visual. Share link đến tool với preset values (nếu có). Integration với design tools: Figma, Sketch, Adobe XD đều có border-radius settings tương tự. Values từ tool này có thể directly input vào design tools. Design tokens: Convert values thành CSS custom properties: --radius-card: 16px; rồi sử dụng: border-radius: var(--radius-card); cho consistency across project.
Border-radius hoạt động với solid borders nhưng không directly với gradient borders (border-image không respect border-radius). Workarounds cho gradient borders với rounded corners: Pseudo-element technique: Tạo ::before pseudo-element với gradient background, slightly larger than parent, rồi parent có solid background che phần trong. Ví dụ: parent có border-radius: 10px, ::before có border-radius: 12px và gradient background. Background-clip technique: Sử dụng background-clip: padding-box cho inner background và border-box cho gradient, với transparent border. SVG approach: Sử dụng SVG với stroke gradient cho complex cases. CSS Houdini: Paint API cho phép custom gradient borders nhưng limited browser support. Recommendation: Pseudo-element technique là most reliable và widely supported.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
