File: class.border.htm

<style>

	.tool-border-generator .inputs {
		width:100%;
	}

	.tool-border-generator .input.tl,
	.tool-border-generator .input.tr,
	.tool-border-generator .input.bl,
	.tool-border-generator .input.br
	{
		position:absolute;
		display:block;
		width:32px;
		height:30px;
		
-moz-opacity: 0.90;
-khtml-opacity: 0.90;
opacity: 0.90;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
filter:alpha(opacity=90);		
	
		
	
	}
	
	.tool-border-generator .input.tl {
		top:-117px;
		left:35px;
	}
	
	.tool-border-generator .input.tr {
		top:-117px;
		right:35px;
	}
	
	.tool-border-generator .input.bl {
		top:-80px;
		left:35px;
	}
	
	.tool-border-generator .input.br {
		top:-80px;
		right:35px;
	}
	


	.tool-border-generator .input.tl .label,
	.tool-border-generator .input.tr .label,
	.tool-border-generator .input.bl .label,
	.tool-border-generator .input.br .label
	{
		display:none;		
	}
</style>


<div class='css-tool  tool-border-generator row'>

  <div class='tool-title'>Border</div>
  
  <div class='display small-12 columns'><div class='text'></div></div>
  
  
  
  <div class='inputs small-12 columns'>
    
    <div class='input tl'>
      <div class='label'>Top Left Radius</div>
      <div class='field'><input type='text' value='11' /></div>
    </div><!-- end input -->
    
    <div class='input tr'>
      <div class='label'>Top Right Radius</div>
      <div class='field'><input type='text' value='25' /></div>
    </div><!-- end input -->
    
    <div class='input bl'>
      <div class='label'>Bottom Left Radius</div>
      <div class='field'><input type='text' value='11' /></div>
    </div><!-- end input -->
    
    <div class='input br'>
      <div class='label'>Bottom Right Radius</div>
      <div class='field'><input type='text' value='39' /></div>
    </div><!-- end input -->
    
    
    
    
    <div class='input border-size'>
      <div class='label'>Border Size (px)</div>
      <div class='field'><input type='text' value='1' /></div>
    </div><!-- end input -->
    
    <div class='input border-color'>
      <div class='label'>Border Color (hex/color)</div>
      <div class='field'><input type='text' value='red' /></div>
    </div><!-- end input -->
    
    <div class='input border-style'>
      <div class='label'>Border Style </div>
      <div class='field'>
        <select>
          <option value='solid'>solid</option>
          <option value='dotted'>dotted</option>
          <option value='dashed' selected>dashed</option>
          <option value='double'>double</option>
        </select>
      </div>
    </div><!-- end input -->



  </div><!-- end inputs -->
  
  
  
  
  
  
  
  <div class='code-area small-12 columns'>
      <div class='label'>CSS</div>
	<div class='field'>
		<textarea></textarea>
	</div>
  </div>


  
  
</div><!-- end tool-radius-generator -->