<dashed-function>: CSS

Want more browser support for this feature? Tell us why.

Experimental:

<dashed-function> CSS CSS @function

<dashed-function> --function-name --my-function(30px, 3)

CSS <dashed-function>

({ })

CSS

`<dashed-function>`

HTML

<p>

html

<p></p>

CSS

CSS --transparent 2 oklch() result

css

@function --transparent(--color <color>, --alpha <number>) {
  result: oklch(from var(--color) l c h / var(--alpha));
}

--base-color #faa6ff :root <p> border background-color <dashed-function> --transparent() var(--base-color)0.8

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  font-family: system-ui;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 20px,
    lightgrey 20px 40px
  );
}

css

:root {
  --base-color: #faa6ff;
}

p {
  width: 50%;
  padding: 30px;
  border-radius: 20px;
  border: 3px solid var(--base-color);
  background-color: --transparent(var(--base-color), 0.8);
}


CSS Functions and Mixins Module # using-custom-functions

MDN

MDN 202625

GitHub