Saved!

Natural Shape Border Radius Generator - cJW9yGSg - cJW9yGSg

FANCY BORDER RADIUS GENERATOR

Natural Shape Border Radius Generator

  
  <div class="col-100-max">
  <div class="col-50 p30 editor">
    
    <div class="col-50 p10">
      <label>Border Radius Top</label>
      <input type="range" id="x1" min="0" max="100" value="30">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x11" value="30">
      <input type="number" id="xx11" value="70">
    </div>
    <div class="clear bgg"></div>
      
    <div class="col-50 p10">
      <label>Border Radius Right</label>
      <input type="range" id="x2" min="0" max="100" value="30">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x22" value="30">
      <input type="number" id="xx22" value="70">
    </div>
    <div class="clear bgg"></div>
      
    <div class="col-50 p10">
      <label>Border Radius Bottom</label>
      <input type="range" id="x3" min="0" max="100" value="70">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x33" value="70">
      <input type="number" id="xx33" value="30">
    </div>
    <div class="clear bgg"></div>

    <div class="col-50 p10">
      <label>Border Radius Left</label>
      <input type="range" id="x4" min="0" max="100" value="70">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x44" value="70">
      <input type="number" id="xx44" value="30">
    </div>
    <div class="clear bgg"></div>

    <div class="col-100 p10">
      <label>Box Color</label>
      <input type="color" id="color1" value="#ffff00">
      <input type="color" id="color2" value="#fc03e9">
        <div class="clear"></div>
    </div>
    <div class="col-100 p10 pt20">
		HEX <input type="text" class="hex" id="hex1" size="7" maxlength="7" value="#f42e78">
		HEX <input type="text" class="hex" id="hex2" size="7" maxlength="7" value="#c17afc">
	</div> 
	  

	
  <div class="col-100 bcg">
    <div class="col-50 p10">
      <label>Box Width px</label>
      <input type="range" id="width" min="10" max="400" value="280">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="xwidth" value="280">
    </div>
    <div class="clear bgg"></div>
	  
    <div class="col-50 p10">
      <label>Box Height px</label>
      <input type="range" id="height" min="10" max="400" value="280">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="xheight" value="280">
    </div>
    <div class="clear"></div>
  </div>

  </div>


  <div class="col-50">
  <h1>Natural Shape Border Radius Generator</h1>
   <div class="shadow-box">
    </div>
    <textarea class="shadow-box-css bsb bcg"></textarea>
	<div class="copy">Click to Copy to Clipboard</div>
	</div>


</div>                  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js