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

Design a clickable div element embedded within an interactive article using HTML5

Currently, I am facing an issue with placing clickable div elements inside an article tag in HTML5. The problem is that when I try to click the divs, it registers as a click on the article itself. Below is an example of my code: HTML: <article id=&apo ...

javascriptcsshtml

Set the jQuery cookie to change the CSS property to hide the element

Currently, I am utilizing the jquery cookie plugin to make the browser remember the state of a CSS after refreshing the page. Below is an excerpt of my code where a button is clicked: $('#cartHolder').attr('style','display: no ...

jquerycssdomcookies

Using CSS transitions to animate elements with specified opacity values

My goal is to transition buttons from opacity 0 to opacity 1 with a delay, but I am facing an issue. Some of these buttons have the "selected" class which gives them an opacity of 0.35. However, when the transition starts, the buttons with the "selected" c ...

jquerycsscss-transitionsopacity

Expansive picture feature within jQuery Mobile

I need help with displaying a large image (685 × 900, only 25kb in PNG) in the 'content' section so that it adjusts automatically for different screen sizes and allows users to zoom in using their fingers. Currently, I have this code: < ...

jqueryhtmlcssjquery-mobile

What is the method for adjusting the subheader color on a Material UI card component?

How can I change the subheader text color to white in a Material UI Card with a dark background? Here is my code: const useStyles = makeStyles(theme => ({ menuColor: { backgroundColor: theme.palette.primary.main, color: '#ffffff', ...

cssreactjsmaterial-ui

What is the best way to create a button with a dynamic background animation in React?

Looking to design a button with an animated background, possibly in gif or video format. An example of what I have in mind is the DOWNLOAD button on this website's main page: Ideally, I am hoping for a solution using React. ...

javascriptcssreactjsuser-interfaceuser-experience

Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner. @page {size: portrait A4; @bottom-left {content: "Some text to display at the bottom left. Some additional text ...

htmlcsspdf

Tips for enabling scrolling on mobile devices

Hello there, I'm facing an issue with scrolling on my website when viewed on mobile devices. Even though I have set the div height to 100%, it appears as 'auto' on mobile screens. As a result, when the text exceeds the screen height, it bec ...

cssresponsive-design

Clicking on text within a DIV using jQuery

How can I use jQuery to show an "alert" when text inside a DIV is clicked, excluding images and other tags? The texts are contained within various DIVs along with images and tags. Is there a way to achieve this using jQuery? Check out the jsFiddle example ...

jquerycsshtmlselect

A step-by-step guide on customizing the background color of the selected date in the MUI DatePicker

I am looking to customize the background color of selected dates in a MUI datePicker. In the image below, you can see that I want to change the blue color to a different color. Here is my code: const customStyles = makeStyles(theme => ({ datePickerC ...

htmlcssreactjsmaterial-ui

An image overlaying a background design featuring a navigation bar and company logo

Is there a way to stack images on a background image similar to this using HTML? There is also a navbar and logo on the background. I attempted to do something like this: //clearfix .image-stack::after { content: ' '; display: table; clear ...

htmlcsssass

separating kids with selectors

What is the recommended method for adding borders between children of various elements within a div? In the example below, there should be borders between p,div and div,img. <div id="list"> <p>child 1</p> <div>child 2</ ...

csscss-selectors

Ways to showcase tooltip text for an unordered list item?

When creating an unordered list, each element's text corresponds to a chapter name. I also want to include the description of each chapter as tooltip text. The Javascript code I currently have for generating a list item is: var list_item = document.c ...

javascripthtmlcss

Is it possible to modify the color of a bootstrap navbar dropdown upon clicking?

I am having trouble changing the color of a bootstrap navbar dropdown link when it is clicked. Currently, the color changes to teal for a moment but then reverts back to the default gray. Here is my current CSS: li.dropdown:active { background- ...

csstwitter-bootstrap

What values can be used for the CSS Property "padding-right-ltr-source"?

Currently, I am facing an issue with box padding specifically in Firefox. Upon inspecting the affected span element, I noticed a property called "padding-right-ltr-source" with the value "physical". Here is the snippet of code: >padding: 0px 15px; ...

cssfirefoxpadding

What impact does setting everything to position:relative have on a webpage?

I stumbled upon some CSS / HTML examples and came across this interesting snippet: *, *:before, *:after { position: relative; } It appears that implementing this rule can have a notable impact on the layout. What might be the rationale behind this ...

htmlcsslayoutcss-position

Tips for resizing a 100% div without displaying vertical scrollbars in the browser

I am facing an issue with a table that has three rows. I have a main #container div with a height of 100%, and inside it is a table with 3 rows. The first and last row contain fixed size content. However, in the second row, there is a #content div with a h ...

javascriptjquerycss

Updating the iFrame source using jQuery depending on the selection from a dropdown menu

I want to create a dynamic photosphere display within a div, where the source is determined by a selection from a drop-down menu. The select menu will provide options for different rooms that the user can view, and the div will contain an iframe to showca ...

javascriptjqueryhtmlcssiframe

How to easily incorporate images after text in Bootstrap 4 beta

I seem to be having trouble inserting an image in the "menu" section for the last item "Kava so sebou" after the text. I want the picture to be centered vertically and the row to maintain consistency with the other items above it. Any advice or suggestions ...

htmlcssbootstrap-4

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. ...

javascripthtmljquerycsscss-selectors