CSS Variables not allowed?

I’m getting the red X in the CSS editor on the top three “–x” variables when trying to use this CSS. Is there a way around this in BB?

.custom-border {
  --s: 50px; /* the size on the corner */
  --t: 5px;  /* the thickness of the border */
  --g: 20px; /* the gap between the border and image */
  
  padding: calc(var(--g) + var(--t));
  outline: var(--t) solid transparent; /* the color here */
  outline-offset: calc(-1*var(--t));
  -webkit-mask:
    conic-gradient(at var(--s) var(--s),#0000 75%,#000 0)
    0 0/calc(100% - var(--s)) calc(100% - var(--s)),
    linear-gradient(#000 0 0) content-box;
  transition: .4s;
  cursor: pointer;
}
.custom-border :hover {
  outline-offset: calc(var(--g)/-1);
  outline: var(--t) solid red; /* the color here */
}

If you enable shortcodes in css/js the code check will be disabled.

Thanks for the response. That link 404’s?

This topic was automatically closed 36 hours after the last reply. New replies are no longer allowed.