CSS Border on Png Image with Transparent Parts

How to draw a border around a semitransparent image? (css)

As of now (January 31st 2015) there is a way to do that without using canvas, with pure CSS, and with only 2 lines of code.

The trick is using the css filter and -webkit-filter properties to draw two drop shadows with no blur, one for the positive axis and one for the negative, which will wrap around the image, which will provide the (hopefully) desired effect.

Note: css filters are not at all supported in IE (let's hope Spartan does better), here is a compatibility table. (Thanks web-tiki)

This first snippet (fiddle) will apply the simplest border possible.

img {  -webkit-filter: drop-shadow(1px 1px 0 black)                  drop-shadow(-1px -1px 0 black);  filter: drop-shadow(1px 1px 0 black)           drop-shadow(-1px -1px 0 black);}
body {  background-color: lightcoral;}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

Transparent border around items on background

My thought process

The only way I can think of is to make the border the same color as the background (in your case, that shade of pink), but note that this is only possible if there is a solid background color.

Example:

.bg {  position: relative;  height: 250px;  width: 500px;  background-image: url(https://i.imgur.com/nRXO8xa.jpg);}
.border {  height: 20px;  position: absolute;  top: 0;  bottom: 0;  left: 30px;  margin: auto;  padding: 10px;  background: steelblue;  border: 10px solid black;}
.no-border {  height: 20px;  position: absolute;  top: 0;  bottom: 0;  right: 30px;  margin: auto;  padding: 10px;  background: steelblue;  border: 10px solid #F7F2D5;}

<div class="bg">  <div class="border">black border</div>  <div class="no-border">"transparent" border</div></div>

css3 border-image's transparent png issue

Put the border on a wrapper with transparent background.

<div id="HeaderBorder">
    <header>
        ...
    </header>
</div>

<style type="text/css">
    #HeaderBorder { /* border image stuff + transparent background */ }
</style>

CSS image border transparency/color issue

Maybe i am mistaken, but you can try to play with border-image-outset and margin attribute.

float:left;
margin:50px 20px;
border-image-source:url(http://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
border-image-outset:30px;

http://jsfiddle.net/6M59T/120/

Border image with opacity

You can use pseudo-element to create border with border-image and then set opacity.

div {  position: relative;  margin: 50px;  font-size: 25px;  padding: 10px 25px;  display: inline-block;}div:after {  content: '';  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  border: 5px solid transparent;  border-image: url('http://www.circlek.org/Libraries/2013_branding_design_elements/graphic_CKI_horizontal_stripesblue_RGB.sflb.ashx') 22 22 repeat;  transform: translate(-5px, -5px);  opacity: 0.4;}

<div>Element</div><div>Element <br> lorem</div>

Add a border to an irregular shaped image

You'll need to remove the the white unused space to alpha channel using an image editor and save it as a .png file then you can make use of drop shadow to apply the desired effect. The following is just a demonstration:

img {  width: 70%;  filter: drop-shadow(4px 0px 0 red);}

<img src="https://s7.postimg.org/65lydsb57/a_Ql6e.png">

---

Related Topics