Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div:

div {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="16px" ry="16px" stroke-width="6" stroke-dasharray="5%25%2c 2%25" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
}
<div></div>

I'm wondering if it's possible to replace the stroke color black with a CSS variable. I tried the following but it didn't work:

div {
  --color: black;
  background-image: url('data:image/svg+xml,%3csvg stroke="var(--color)" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="16px" ry="16px" stroke-width="6" stroke-dasharray="5%25%2c 2%25" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
}
csssvgcss-variables

Answer №1

Try a different approach using mask:

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  -webkit-mask: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="16px" ry="16px" stroke-width="6" stroke-dasharray="5%25%2c 2%25" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
  background:var(--c,red);
  border-radius: 16px;
}
<div class="box"></div>
<div class="box" style="--c:green"></div>
<div class="box" style="--c:blue"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the nth-child CSS property in Bootstrap?

My cards need some styling adjustments - specifically, I want the first and third card in each row to have a top margin of 50px. Strangely, this doesn't seem to work with Bootstrap, but it does with pure CSS. Is there a specific class in Bootstrap tha ...

csstwitter-bootstrapbootstrap-4

Adjust the color of the text for the items in the drop-down field on the WooCommerce

https://i.stack.imgur.com/CHJUz.png It appears that the font color on my main website is white. However, on the WooCommerce Checkout Page, all drop down fields' items are also displayed in white, making it difficult for users to see the options witho ...

htmlcsswordpresswoocommercecss-selectors

What steps can be taken to eliminate the 1-pixel line between the background and gradient?

How can I remove the line that appears between the block and the gradient background when zooming in, especially noticeable in Safari (After zooming a couple times, Cmd +) For more details, please refer to this jsfiddle link: http://jsfiddle.net/lokapujya ...

cssbackgroundlinear-gradients

Styling list items (li) on hover without using the li:

I have a menu where I am using the :after element. When I hover over a li in the menu, the hover effect also includes the :after element. HTML: <ul class="main-menu"> <li class="active"><a href="">Menu</a></li> <l ...

htmlcsshoverhtml-lists

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...

cssangular

What is the best way to ensure the header spans the entire width of a webpage using the display: flex; property and flex-direction: column styling within the body element

Click here for the CSS code snippet Hello everyone, this is my very first query on Stack Overflow. I know it might be a simple question but it's my first time posting here so kindly bear with me. Below is the CSS code snippet provided: *{ ...

htmlcssflexbox

Steps for incorporating a personalized SVG icon into your project

Currently, I am attempting to incorporate an svg icon into the AppBar component. The svg code looks something like this: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 123.4 30"> <path fill="#00B9A7" d="M7.6 14l5.6-9.6c-.7-1.1-1.3-2.3-2- ...

reactjssvgmaterial-ui

Expansive dropdown menu stretching across the entire width, yet the content within restricted to a width of

I have recently made some updates to our website's dropdown menu, expanding the results displayed. However, I would like the dropdown contents to fit within the width of our page. I have tried adjusting the CSS with limited success: .menu > ul > ...

htmljquerycss

What steps should I take to ensure that this website is responsive across all screen sizes?

Struggling with adapting to different screen sizes, especially with Bootstrap. Below are the images for reference: https://i.stack.imgur.com/AlCjA.png https://i.stack.imgur.com/FT2mU.png Sass source code snippet: body background: $main-background ...

htmlcsssass

Utilizing jQuery for displaying or hiding list elements

To view all the code, click on this link: http://jsfiddle.net/yrgK8/ A section titled "news" is included in the code snippet below: <ul id="news"> <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li> <li>&l ...

javascriptjqueryhtmlcssslideshow

Ways to implement a conditional statement to display a div using JavaScript

Looking for a way to utilize Javascript conditions to toggle the visibility of a div in an HTML5 document? Check out this code snippet below: #demo { width: 500px; height: 500px; background-color: lightblue; display: none; } To set the f ...

javascriptjquerycsshtml

What about using CSS sprites in place of individual images?

After examining the code for some major websites, such as YouTube and Yahoo, I noticed that they tend to rely heavily on CSS sprites rather than individual image tags. Is this considered a best practice in web development? While using image tags with alt a ...

cssimagesprite

Is it the right time to dive into HTML5 & CSS3?

The excitement around HTML5 and CSS3 is hard to ignore. But when is the right time to start incorporating them into our projects? How close are we to fully utilizing their capabilities? Update: I'm not interested in following the principles of: Grac ...

htmlcss

Design a personalized button with a hand-shaped image using CSS

I am aiming to design a unique custom button that resembles the shape of a hand featured in this image, with the intention of adding some functionality to it later. My attempts so far have involved using an SVG path created in GIMP within a button, but all ...

htmlcss

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I check i ...

javascriptjqueryhtmlcss

Set the text alignment to the left/start inside a div contained within a Material UI Box

Trying to figure out how to make the error handling ui of this field look like another field's error handling ui. Note that in the second example, the error text is aligned to the left. How can I achieve this alignment without considering text color ...

htmlcssreactjsmaterial-uiinline-styles

Achieving vertical centering by adjusting padding within the parent container

I've successfully set up a DIV with a height of 200px and an inner div at 150px, leaving me 50px for the image caption. Now I want to vertically center the text within that remaining 50px. .captioned { width: 300px; height: 200px; display: fl ...

htmlcss

Tips for personalizing tooltips in Bootstrap 4

Currently, I am utilizing Bootstrap '4.0.0-alpha.6' and attempting to customize the tooltip styles. Despite adding a custom CSS class along with using Bootstrap 4, the tooltip is not responding correctly to my specified style when hovering over. ...

csshtmltwitter-bootstrap

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...

htmlcssdynamicheight

Struggling to show labels in the correct position for each button?

I need help with aligning labels under buttons. I have 3 buttons, each with a corresponding label. I want the labels to be displayed in line under the buttons, and if the length of a label exceeds the button width, it should wrap to the next line. I'v ...

htmlcss