https://jsokit.com/blog/tags/border/ Recent content in Border on JsonKit Blog Hugo en © 2025 JsonKit Sun, 25 Jan 2026 12:47:05 +0000 https://jsokit.com/blog/posts/css-button-generator-from-presets-to-interactive-states/ Sun, 25 Jan 2026 12:47:05 +0000 https://jsokit.com/blog/posts/css-button-generator-from-presets-to-interactive-states/ CSS Button Generator: From Presets to Interactive States Working on an admin dashboard project, the UI designer handed me a pile of button styles: primary, secondary, danger, ghost… Each with different colors, border-radius, shadows. Writing CSS by hand works, but tweaking values means editing multiple places. So I built a button generator — drag sliders, get code. Core Button Properties A complete button style boils down to these: .btn { padding: 12px 24px; /* Padding */ font-size: 16px; /* Font size */ color: #ffffff; /* Text color */ background-color: #3b82f6; /* Background */ border: none; /* Border */ border-radius: 6px; /* Border radius */ cursor: pointer; /* Cursor */ transition: all 0. https://jsokit.com/blog/posts/css-border-generator-from-basic-to-gradient-borders/ Sun, 25 Jan 2026 10:46:21 +0000 https://jsokit.com/blog/posts/css-border-generator-from-basic-to-gradient-borders/ CSS Border Generator: From Basic to Gradient Borders Recently, I was building an admin dashboard when the designer handed me a card with a gradient border. I thought, “Easy, just a border.” Turns out, CSS border doesn’t support gradients natively. After digging through documentation, I discovered the mask + linear-gradient technique. Here’s the complete implementation, along with a border generator tool I built. CSS Border Basics Let’s start with the fundamentals.