2

I'm interested is it possible to make css image border the way it shown on the image? thanks a lot. Maybe put some div under the image? Any thoughts?

2-color border

<img src="https://i.stack.imgur.com/3s43x.jpg" width="400" height="400" alt="">
0leg
  • 398
  • 1
  • 8
  • You could try making a wrapper and putting it as a background img, and having two divs inside to make the border.. http://jsfiddle.net/w008zsrw/ – jleggio Sep 03 '14 at 20:53

3 Answers3

6

You could use padding and a gradient background.

jsFiddle example

img {
    background: rgba(52, 117, 247, 1);
    background: -moz-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(52, 117, 247, 1)), color-stop(50%, rgba(52, 117, 247, 1)), color-stop(50%, rgba(230, 214, 39, 1)), color-stop(100%, rgba(230, 214, 39, 1)));
    background: -webkit-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: -o-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: -ms-linear-gradient(left, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    background: linear-gradient(to right, rgba(52, 117, 247, 1) 0%, rgba(52, 117, 247, 1) 50%, rgba(230, 214, 39, 1) 50%, rgba(230, 214, 39, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3475f7', endColorstr='#e6d627', GradientType=1);
    padding:4px;
}
j08691
  • 204,283
  • 31
  • 260
  • 272
1

With a container you can use the ':after' element like this:

<div class="double">
    <img src="http://placehold.it/400x400">
</div>    

.double {
    float:left;
    position:relative;
    padding:3px;
    background:blue;
    width:400px;
    height:400px;
}
.double:after {
    content:"";
    display:block;
    position:absolute;
    width:50%;
    height:100%;
    background:red;
    right:0;
    bottom:0;
}
.double img {
    position:relative;
    z-index:1;
}

Check this Demo Fiddle

With this you can increase the border with the 'padding' value of the container.

DaniP
  • 37,813
  • 8
  • 65
  • 74
0

You could use the following HTML/CSS combination.

JS Fiddle Demo

HTML:

<div class="container">
    <img class="img" src="http://placehold.it/400">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.container { //the containing div
    width: 410px;
    height: 410px;
}
.left{ //the left "border"
    background-color: red;
    height: 410px;
    width: 205px;
    float: left;
}

.right { //the right "border"
    background-color: green;
    height: 410px;
    width: 205px;
    float: right;
}

.img { //the image
    position: absolute;
    margin-left: 5px;
    margin-top: 5px;
}

@j08691's answer may look complicated but it's potentially cleaner because you'll be able to move the image around more without having to worry about other elements on the page. That could become an issue using the code here.

Dan
  • 9,391
  • 5
  • 41
  • 73
  • Add, `body { height: 10000px; }` and scroll. What exactly is the purpose behind `position: fixed` for the image? – DRD Sep 03 '14 at 20:56
  • @DRD Thanks...good point, I updated my answer. `position: absolute` fixes that. – Dan Sep 03 '14 at 21:01