<h2 class="gradient-border">Hello World</h2>
<h2 class="gradient-border" style="--border-bottom-width: 0.15em; --angle: 30deg;">Hello World</h2>
<h2 class="gradient-border" style="--border-bottom-width: 0.15em; --border-left-width: 0; --angle: to left;">Hello World</h2>
<h2 class="gradient-border" style="--border-top-width: 0.08em; --border-right-width: 0.08em;--border-bottom-width: 0.08em; --border-left-width: 0.08; --angle: 45deg;">Hello World</h2>
// More techniques for creating CSS borders:
// https://moderncss.dev/the-3-css-methods-for-adding-element-borders/

.gradient-border {
  --angle: to bottom;
  --border-top-width: 0;
  --border-right-width: 0;
  --border-bottom-width: 0;
  --border-left-width: 0.15em;

  // Be sure to set all borders to 0 for best support if you do not want it to appear on all sides
  border-width: 0;
  border-style: solid;
  border-top-width: var(--border-top-width);
  border-right-width: var(--border-right-width);
  border-bottom-width: var(--border-bottom-width);
  border-left-width: var(--border-left-width);
  border-image: linear-gradient(var(--angle), #40e0d0, #ff8c00, #ff0080) 1;

* {
  box-sizing: border-box;

body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 1rem;
  background-color: #222;
  color: #f9f9f9;

h2 {
  font-size: 2.5rem;
  padding: 0.25em 0.5em;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.