Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Gradient border — most common use case */ .gradient-border { border: 4px solid transparent; border-image: linear-gradient( 135deg, #1a73e8, #e53935 ) 1; border-radius: 0; /* border-image disables radius */ padding: 1rem; } /* Workaround for radius + gradient border */ .gradient-border-rounded { position: relative; background: #fff; border-radius: 12px; padding: 1rem; } .gradient-border-rounded::before { content: ""; position: absolute; inset: -3px; border-radius: 14px; background: linear-gradient(135deg, #1a73e8, #e53935); z-index: -1; } /* Image slice border */ .ornate { border-image: url("/img/border-ornament.png") 30 round; border-width: 30px; }
Result
Open