I am working on a website and I have encountered a problem that borders of elements are rendered differently on Firefox then on Opera.
I will be thankful for any suggestion on how to fix this.
Picture (Opera on the left, Firefox on the right)
EDIT: CodePen
HTML:
<div class="red-bordered-top-bar"></div>
<div class="red-bordered-bar" style="height: 256px;"></div>
<div class="red-bordered-bottom-bar"></div>
CSS:
.red-bordered-bottom-bar {
position: relative;
border-width: 0px 0px 15px;
border-color: transparent;
border-style: solid;
border-image: url("../Resources/primary_bottom.svg") 15 15 15 15 round round;
background-color: #33393E;
}
.red-bordered-bar {
position: relative;
background-color: #FE634A;
}
.red-bordered-top-bar {
position: relative;
border-width: 15px 0px 0px;
border-style: solid;
border-color: transparent;
border-image: url("../Resources/primary_top.svg") 15 15 15 15 round round;
background-color: #33393E;
}
Try to change 15 15 15 15 border image slice value :
//top
-moz-border-image: url("https://dl.dropboxusercontent.com/u/35123963/primary_top.svg") 11 15 15 15 round round !important;
//bottom
-moz-border-image: url("https://dl.dropboxusercontent.com/u/35123963/primary_bottom.svg") 15 15 11 15 round round !important;
-moz for mozilla browser
Related
Can I produce something like this with a single image using css and html:
This is the single image
I have tried using border-image but it did not work out as expected. This is what I got with border-image:
My Code:
border: 40px solid transparent;
border-image-source: url(../images/mlt-border.png);
border-image-repeat: round;
border-image-slice: 10;
But I need the image to be repeated as in the first picture.
Yes, you can do it with one image, but that image needs to be divided into 9 sections, where the corners of the image correspond to the corners of the border, and similarly the edges of the image correspond to the edges of the border. In this case, you just need a 3x3 grid of the same image, like so:
Then you need to use the border-slice property to specify which parts of the image should be used for which parts of the border. The 47's and 40's correspond to the fact that each of the 9 cells of the image is 40px wide by 47px high.
.border {
width: 200px;
height: 235px;
border-style: solid;
border-top-width: 47px;
border-right-width: 40px;
border-bottom-width: 47px;
border-left-width: 40px;
border-image: url("https://i.stack.imgur.com/EGyqa.png") round;
border-image-width: 47px 40px;
border-image-slice: 47 40 47 40; /* measuring in px from top, right, bottom and left edges of the image respectively */
}
<div class="border"></div>
A full explanation of the border-image syntax can be found here.
Here there are two samples, round and stretch:
#borderimg-round {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round; /* Safari 3.1-5 */
-o-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round; /* Opera 11-12.1 */
border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% round;
}
#borderimg-stretch {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
-o-border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
border-image: url(https://res.cloudinary.com/deltreetech/image/upload/v1565010696/mlt-border_ekrg5s.png) 20% stretch;
}
<!DOCTYPE html>
<html>
<body>
<p id="borderimg-round">border-image: url(image.png) 20% round;</p>
<p id="borderimg-stretch">border-image: url(image.png) 20% stretch;</p>
</body>
</html>
If you have problems, post here more details!
I am having a problem using css to have different borders in my div.
I need a card (div) that has "normal" solid border on the left, top and right sides of the div. However, in the bottom, I need a specific border image.
I am able to have the image in the bottom border OR the "normal" border on the three sides, but I do not know how to have both at the same time.
When I put the image, it goes to all borders.
I am using the following code to the bottom image border:
border-width: 0px 0px 32px 0px;
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat;
Do you know any way to have a normal solid border on the three sides and the image in the bottom border?
If I change the border-width to more than zero, appears the image, not the normal solid border.
Thanks in advance!
You could use :after to simulate that effect.
div {
border: 1px solid black;
border-bottom: 0px;
}
div:after {
content: '';
width: calc(100% + 2px);
margin-left: -1px;
background: white;
display:block;
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66);
background-repeat: repeat;
height: 10px;
}
<div>test</div>
You can set the border for bottom image first, then set for other sides.
border-image:url("http://example.com/image1.png");
/* setting borders for other sides */
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
Below it set for other sides top, right and left.
I actually was able to do this by adding a div inside another div.
.div-outside-class {
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #e6e9ee;
border-radius: 10px;
}
.div-inside-class {
border-style: solid;
border-width: 0px 0px 32px 0px;
-moz-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-webkit-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
-o-border-image: url(../images/bordas/Recorte.png) 31 25 33 26 repeat;
border-image: url(../images/bordas/Recorte.png) 31 25 33 26 fill repeat;
margin-bottom: -16px;
}
HTML code is something like that:
<div class="div-outside-class">
<div class="div-inside-class>
</div>
</div>
I have the following image which I am trying to set as an image border (I've added the red just so that you can see it properly — the real version is trimmed with transparent bg)
Dimensions: 363 x 10
I am trying to set it as a border image just for the top border (for the time being):
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
If I set border-image-slice: 15%; the general shape of the top border looks correct (I think), but it looks really blurry:
Can anyone see why this is? Originally I left border-image-slice out but the image was only showing in the corners... and played about with different values but none seemed to give me the correct result
.panel {
background: #fff;
background: none;
border-radius: 0;
border-width: 10px;
border-style: solid;
border-image: url('../image/marker-white-01-reversed.png');
border-image-slice: 15%;
}
Look at your code..
Radius 0 and image slice 15% and solid border..
That is you have to have such an image.
I would like to style the border image the same as in w3school example: http://www.w3schools.com/css/tryit.asp?filename=trycss3_border-image.
But when I tried it in my desktop, https://jsfiddle.net/tangjeen/6yLtmb98/ the result of the border image is not the same.
Would appreciate if you could help me. Thank you.
<div class="row" id="round">
<p>sdfsfsdf</p>
</div>
#round{
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round;
background-color: lightyellow;
}
Make sure the border-width: 15px;/*your value*/ and border-style: solid; /*needed for Firefox*/ are set.
Or the shorthand way border: 15px solid transparent;. ALSO need to make sure it's set BEFORE border-image rule.
#round {
border-width: 15px;
border-style: solid;
border-image: url("https://i.imgur.com/BzbWBYA.png") 30 30 round;
background-color: lightyellow;
}
<div id="round">
<p>hello world!</p>
</div>
To resolve this problem you can also adjust the border-image-width and add a padding to your block:
#round{
-webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Safari 3.1-5 */
-o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round; /* Opera 11-12.1 */
border-image: url(http://www.w3.org/TR/css3-background/border.png) 30 30 round;
border-image-width: 15px;
padding: 5px 0px 5px 15px;
background-color: lightyellow;
}
I'd use this :
#round img{
border: imgpath;
}
EDIT
By the way, your code works... look : http://jsfiddle.net/5Lyw6qek/
I have an image that I want to use for border-bottom for .box class:
<div class="box">Hello World</div>
And the CSS:
.box {
background: #16a085;
width: 100px;
color: white;
padding: 100px;
text-align: center;
font-family: "monospace";
font-weight: bold;
font-size: 30px;
}
The result is:
How can I set an image as border, being repeated horizontally, on the bottom side? A margin between the green background and border line would be required also.
I tried:
/* border stuff */
border-image: url(http://i.imgur.com/CRWpl2d.png);
border-image-repeat: repeat;
An alternative without using images would be:
border-bottom: 3px dotted #367dd2;
padding-bottom: 4px;
...but I want to use an image for border instead.
JSFDIDLE
You can set border using background property from the bottom side like this:
background: #16a085 url('http://i.imgur.com/CRWpl2d.png') bottom center repeat-x;
But if you want to use margin between background and border maybe this fiddle is useful for you: http://jsfiddle.net/nikoloza/CfT2c/
Maybe your vendor prefixes could be the issue, as well as specifying your border styles as you would normally. Let me know if this helps!
border: 15px solid transparent;
-webkit-border-image: url(http://placehold.it/350x150) 30 30 round; /* Safari */
-o-border-image: url(http://placehold.it/350x150) 30 30 round; /* Opera */
border-image: url(http://placehold.it/350x150) 30 30 round;
You can below css3 border-image property
-webkit-border-image:url(imageURL) 30 30 round; /* for Safari browsers*/
-o-border-image:url(imageURL) 30 30 round; /* for opera browsers*/
border-image:url(imageURL) 30 30 round;
IE 8,9 might not support border-image property, by you can achieve it by css3pie. Please refer http://css3pie.com/documentation/supported-css3-features/