JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<div>
  <img src="http://www.stillhq.com/svn/trunk/pngtools/sample.png">
  <div class="frame">
    <div class="top" style="position:absolute; width:640px; height:20px; left: 8px; top:8px;"></div>
    <div class="left" style="position:absolute;width:20px; height:480px;left: 8px; top:8px;"></div>
    <div class="right" style="position:absolute;width:20px; height:480px;left: 628px; top:8px;"></div>
    <div class="bottom" style="position:absolute;width:640px; height:20px;left: 8px; top:468px;"></div>
  </div>
</div>

CSS

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+99&1+0,0+99 */

.left {
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
  /* IE6-9 */
}

.right {
  background: -moz-linear-gradient(right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}

.top {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+99&1+0,0+99 */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 99%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  /* IE6-9 */
}

.bottom {
  /* Permalink - use to edit and share this gradient:...

JavaScript

var borderThickness = 20;
var imageWidth = 480;
var imageHeight = 640;
var imageX = 8;
var imageY = 8;

function positionBorder(){
	
}