CODEWITHSUNDEEP
cssborder
0leg
0leg

Reputation: 408

CSS 2-color border

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.sstatic.net/3s43x.jpg" width="400" height="400" alt="">

Upvotes: 2

Views: 1639

Answers (3)

Dan
Dan

Reputation: 9468

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.

Upvotes: 0

DaniP
DaniP

Reputation: 38252

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.

Upvotes: 1

j08691
j08691

Reputation: 207861

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;
}

Upvotes: 6

Related Questions