<div class="not-supported"> Your browser doesn't support this demo. It is only supported in the latest version of Chrome Canary</div>

<div class="argument">I have a Blue Border With CSS Functions!</div>
<div class="default">I am like the last box! but with the default red</div>
@function --dashed-border(--color: red) {
  result: 2px dashed var(--color);
}

.argument {
  border: --dashed-border(blue);
}

.default {
  border: --dashed-border();
}

/* Aesthetic Changes */

* {
  padding: 0px;
  margin: 0px;
  border-box: 0px;
}

html {
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  padding: 20px;
  padding-top: 100px;

  & > * {
    flex: 1 1 250px;
  }
}

div {
  padding: 10px;
}

.not-supported {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 40px;

  font-weight: 600;
  text-align: center;

  background-color: #ffbd59aa;
}

@supports (border: --dashed-border()) {
  .not-supported {
    display: none;
  }
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.