[Border-image generator] include gradient as border-image-source example
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 647
- Forks
- 830
- PR merge metrics
- No merged PRs in 30d
Description
All current examples on the border image generator ( https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator ) include linked images but it's possible to use gradients as border-image-source It would be nice to have an example of this.
The current blue striped border image (https://mdn.github.io/css-examples/tools/border-image-generator/border-image-5.png) seems like a perfect candidate to replace with a repeating-linear-gradient
border-image: repeating-linear-gradient(to bottom right, #97bde1 0 1px, transparent 2px 6.3px, #97bde1 7px 9.2px) 0 12 / 0px 12px repeat;
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the border-image generator linked in the issue and the current blue striped border image example. Replace or supplement that example with the proposed repeating-linear-gradient source, then verify that the generator and rendered example display the gradient border correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100