Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                h1 Border with gradient and radius.

p The #[code border-image] property (the proper way of creating a gradient border) is not compatible with the #[code border-radius] property:

.gradient-border.-using-border-image
  h2 Gradient border
  p Using #[code border-image].
  
.code
  input#border-image(type='checkbox')
  label(for='border-image') code
  
  code
    pre
      | .container {
      |   border-width: var(--border-width);
      |   border-style: solid;
      |   border-image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch;
      |   border-radius: var(--border-radius); /* 👈 this has no effect */
      | }
  
p We can use a #[code clip-path] to round the outer corners. But the inner corners remain square:

.gradient-border.-using-border-image.-using-clip-path
  h2 Gradient border
  p Using #[code border-image] and #[code clip-path].
  
.code
  input#clip-path(type='checkbox')
  label(for='clip-path') code
  
  code
    pre
      | .container {
      |   border-width: var(--border-width);
      |   border-style: solid;
      |   border-image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch;
      |   clip-path: inset(0px round var(--border-radius));
      | }
 
p So, a nice-looking border with both a gradient and a radius requires a little more CSS (some #[code calc]-ulations and a pseudo-element):

.gradient-border.-using-pseudo-element
  h2 Gradient border
  p Using a pseudo element.
  
.code
  input#pseudo(type='checkbox')
  label(for='pseudo') code
  
  code
    pre
      | .container {
      |   width: calc(100% - (2 * var(--border-width)));
      |   margin: var(--border-width);
      |   position: relative;
      |   border-radius: calc(var(--border-radius) - var(--border-width));
      |   background-color: var(--background);
      | }
      |
      | .container::before {
      |   content: "";
      |   position: absolute;
      |   top: calc(var(--border-width) * -1);
      |   right: calc(var(--border-width) * -1);
      |   bottom: calc(var(--border-width) * -1);
      |   left: calc(var(--border-width) * -1);
      |   z-index: -1;
      |   border-radius: var(--border-radius);
      |   background-image: linear-gradient(135deg, var(--color-1), var(--color-2))
      | }
  
hr

h2 Update

small November 2022

p A #[a(href='https://codepen.io/dangodev') colleague] showed me #[a(href='https://codepen.io/argyleink') Adam Argyle]'s #[a(href='https://codepen.io/argyleink/pen/KKeNVJJ') awesome pen] achieving the same effect by using two backgrounds and clipping them to different box-models 🤯
  
.gradient-border.-using-box-models
  h2 Gradient border
  p Using different box models.
  
.code
  input#box-models(type='checkbox')
  label(for='box-models') code
  
  code
    pre
      | .container {
      |   border: var(--border-width) solid transparent;
      |   background-clip:
      |     padding-box,
      |     border-box;
      |   background-image:
      |     linear-gradient(var(--background), var(--background)),
      |     linear-gradient(135deg, var(--color-1), var(--color-2));
      |   background-origin: border-box;
      | }
    
hr

h2 Post-script
p The above are, however, still work-arounds or hacks. Neither solution actually uses the #[code border-image] property.

p We frequently use work-arounds to achieve stuff that isn't available with properties, but once the property has landed it feels a bit odd to have to circumvent it?

p Shouldn't we simply be able to write:

code
  pre
    | .container {
    |   border-width: var(--border-width);
    |   border-image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch;
    |   border-radius: var(--border-radius);
    | }
    
p The #[a(href='https://w3c.github.io/csswg-drafts/css-backgrounds/#corner-clipping', rel='external') spec] does not explain why the #[code border-radius] does not affect a #[code border-image]. I wonder if it is to do with the #[a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset', rel='external') #[code border-image-outset]] property or difficulty implementing (the #[code outline] property was not affected by the #[code border-radius] property in the beginning).

p If you know the answer, please comment on this pen.
    
  
              
            
!

CSS

              
                .gradient-border
  --color-1: rebeccapurple
  --color-2: crimson
  --border-radius: 1.25rem
  --border-width: 0.5rem
  
  width: 100%
  padding: 2rem
  position: relative
  border-radius: var(--border-radius)
  
  * + *
    margin-top: 0.5rem
  
  &.-using-border-image
    border:
      width: var(--border-width)
      style: solid
      image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch
      
  &.-using-clip-path
    clip-path: inset(0px round var(--border-radius))
    
  &.-using-pseudo-element
    width: calc(100% - (2 * var(--border-width)))
    margin: var(--border-width)
    position: relative
    background-color: var(--background)
    border-radius: calc(var(--border-radius) - var(--border-width))
    
    // just an extra touch :)
    box-shadow: 0 2px 4px rgba(black, 0.4)
    
    &::before
      content: ''
      position: absolute
      top: calc(var(--border-width) * -1)
      right: calc(var(--border-width) * -1)
      bottom: calc(var(--border-width) * -1)
      left: calc(var(--border-width) * -1)
      z-index: -1
      border-radius: var(--border-radius)
      background-image: linear-gradient(135deg, var(--color-1), var(--color-2))
  
    
  &.-using-box-models
    border: var(--border-width) solid transparent
    background:
      clip: padding-box, border-box
      image: linear-gradient(var(--background), var(--background)), linear-gradient(135deg, var(--color-1), var(--color-2))
      origin: border-box
 
// ----------------------------------------------------------------------------
// general styling below

:root
  --white: white
  --charcoal: #333

  --background: var(--white)
  --foreground: var(--charcoal)

  @media (prefers-color-scheme: dark)
    --background: var(--charcoal)
    --foreground: var(--white)
  
*,
*::after
  margin: 0
  padding: 0
  box-sizing: border-box
  
html
  font-size: 112.5%
  
body
  max-width: 24rem
  height: 100%
  margin:
    right: auto
    left: auto
  padding: 2rem 1rem
  background-color: var(--background)
  color: var(--foreground)
  font-family: sans-serif
  
  > * + *
    margin-top: 2rem
  
p
  line-height: 1.5
  
a
  color: inherit
  
code
  font-size: 125%
  
  pre
    margin-top: 1rem
    padding: 1rem
    border-radius: 1.25rem
    overflow-x: auto
    position: relative
    background-color: var(--foreground)
    color: var(--background)
    font-size: 75%
    line-height: 1.5
    
.code
  [type='checkbox']
    position: fixed
    top: -10000px
  label
    padding: 0.25rem 0.5rem
    border: 1px solid
    border-radius: 0.5rem
    font-size: 85%
  label::before
    content: 'Show '
  code
    display: block
    overflow: hidden
    height: auto
    max-height: 0
    
.code:has([type='checkbox']:checked)
  label::before
    content: 'Hide '
  code
    max-height: 40rem
    
    
  

              
            
!

JS

              
                
              
            
!
999px

Console