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/
Related
I have the following markup:
.hero{
padding: 100px;
background: lightgrey;
border: 1px solid black;
}
.gradient{
background: linear-gradient(195deg, transparent 31%, #FFFFFF 31.2%), linear-gradient(90deg, #79CAF0 0%, #79CAF0 100%);
}
<div class="hero gradient"></div>
Which renders fine on Chrome, Firefox etc. However, on Safari or devices running Mac OS, there's a thin (but noticeable) border being rendered. Like so:
Notice that line at the bottom of the gradient? Why is that occurring?
Change the last value from the first gradient from 31.2% to 31% and the line should disappear.
I don’t think you can avoid this with linear-gradient at certain angles and color combinations. I’ve run into this myself in the past and had to switch to using SVGs. Let me know if you would like an example of how to do that.
FYI, you can simply the CSS to use a single linear gradient:
.hero{
padding: 100px;
background: lightgrey;
border: 1px solid black;
}
.gradient{
background: linear-gradient(195deg, #79CAF0 31%, transparent 31%);
}
<div class="hero gradient"></div>
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 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 known you can add an outline border with CSS3.
outline: 10px solid red;
Now I was wondering how I can add also a radius to that outline border.
I have tried this one, but doesn't work:
.radius {
padding: 20px 60px;
text-transform: capitalize;
-moz-outline: 10;
outline: 10px solid red;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
Try using CSS-Tricks' Infinite Borders technique and applying border-radius.
This method will require borders and box-shadow and not outline.
img {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3
outline: 5px solid hsl(0, 0%, 60%); */
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
/* If you could do pseudo elements
you could get a few more... */
/* Also, HSL is awesome but don't use it if
you need super old browser support */
}
body { padding: 50px; text-align: center; }
<img src="https://www.randomlists.com/img/animals/chipmunk.jpg">
Firefox has a property -moz-outline-radius, however the request to implement a similar feature in WebKit was closed as WONTFIX. The plan for the future is to make the outlines follow the borders.
I realize this doesn't help much, but the answer to your question is: currently, no (not in a cross browser way). In the meantime you should use an alternative approach like the one suggested by thekalaban.
#MichaelYaeger Similar answer to user1685185 but with an updated JSFiddle, use border-radius and box-shadow. This JS Fiddle is shown using a "border" around a circular button (bootstrap), but the same applies an image, etc.