Questions tagged [border-image]
115 questions
9
votes
2 answers
Add more than one gradient in border-image?
For background-image you can add as many radial-gradient and/or linear-gradient you want. But for border-image it seems like you can only add one. If find it quite strange, because the principle of how to display gradients should be the same for…
thadeuszlay
- 2,787
- 7
- 32
- 67
8
votes
3 answers
Button gradient borders with transparent background
Here is the result I would get:
So the default button has gradient border with transparent background (as I want to see the parent's background through it).
When the user hover over the button I want to fill it with the same gradient has the…
Noé VIRICEL
- 208
- 1
- 3
- 13
6
votes
2 answers
Border image with opacity
I have this:
.striped-border {
border: 8px solid transparent;
border-image: url(../img/stripes.png) 9 round;
}
What I want:
Is it possible to apply an opacity to the border-image only and not the content?
Carlos Torres
- 419
- 2
- 9
- 19
6
votes
2 answers
CSS Border Image Gradient Not Working in Safari 10
I ran into an issue with Safari 10 and CSS border image gradients. It works in all other browsers, and even in Safari 9. It even shows up in Safari 10 in online simulators. Please see images below:
(I guess that's IE 11, not IE 10. Thanks for the…
Kenton de Jong
- 1,001
- 4
- 17
- 37
6
votes
4 answers
CSS border-image: Only the corners filled with the specified background-image. Why?
I would like to use the CSS property "border-image": https://developer.mozilla.org/de/docs/Web/CSS/border-image
But for some reason it fills only the four corners of the element:
My code:
.wrap {
width: 400px;
height: 300px;
margin:…
cluster1
- 4,968
- 6
- 32
- 49
4
votes
1 answer
Can I use a SVG element in the same file to display a border-image?
I have a
SteeveDroz
- 6,006
- 6
- 33
- 65
4
votes
1 answer
Woocommerce - Add border image to products
I'm trying to add a border-image around each product, I've designed the image in illustrator but can't get it to show. The src etc is correct.
.woocommerce ul.products li.product, .woocommerce-page ul.products
li.product {
border-image-slice:…
JoeIsBlogging
- 185
- 1
- 4
- 12
3
votes
3 answers
How to make CSS border-image work
I am stuck with borders on my website. I want to put an image at the top of my vertical menu, one at the bottom and a background for the middle but that doesn't work.
This is my code:
.border-image {
border: solid transparent 10px; //I tried with…
remyremy
- 3,548
- 3
- 39
- 56
3
votes
1 answer
Is it possible to apply border-radius to border-image?
I am styling an input field with a rounded border (border-radius) like the image below. and attempting to add a gradient to said border.
However, I tried applying the code below or the results I found by searching, but it didn't work.
Please tell me…
Jundev
- 93
- 1
- 7
3
votes
2 answers
Using a round image as as border image
I want to use a roundish image as a border image to cover the whole outer part of an image. You can see two images below one of them being rectangle and the other one being round. I was able to figure out how to use the rectangle image to perfectly…
Ashok
- 369
- 5
- 16
3
votes
2 answers
border-radius with border-image
In following code I expect both divs to be round. But the first one with border-image applied is square. How can I fix that and make it round too?
div {
float: left;
width: 130px;
height: 130px;
margin: auto;
border: 30px solid…
Qwertiy
- 19,681
- 15
- 61
- 128
3
votes
2 answers
How to set multi-color border using border-image and linear-gradient?
Was trying to make a multi-color bottom border like in below image, but failed.
Tried to use border-image: linear-gradient(), but didn't manage. it only gets one of the colors: #707070.
a {
color: #707070 !important;
font-size: 20px;
…
Hai Na Zheng
- 167
- 3
- 11
3
votes
3 answers
Safari vs Chrome/Firefox: border-image vs border-color
Safari treats border-color:transparent as overriding border-image, whereas the opposite is true in Chrome and Firefox. (Safari is consistent with the others if border-color is an opaque or semitransparent color. rgba(0,0,0,0) behaves the same as…
zwol
- 135,547
- 38
- 252
- 361
3
votes
2 answers
CSS border-image negative offset (without HTML edition)
We are looking to obtain exactly this type of border for almost all img tags inside the content area of a CMS (wordpress/joomla) site (that's why we are searching for a solution using only CSS, without accesing any parent tag):
First step goes…
DavidTaubmann
- 3,223
- 2
- 34
- 43
3
votes
2 answers
Create css noisy borders with a solid border color and transparent png
When making websites, I often use transparent png's (f.i. created with http://www.noisetexturegenerator.com/) to give the design a more material, realistic look.
Now, I'm working on a design which also heavily uses borders, so I wondered if it was…
BracketBulldog
- 33
- 5