Saved!

Box Border Radius CSS Generator | codesheet.org - m9Ct5k4J

Box Shadow CSS Generator The ultimate CSS tools for web designers Gradient Generator Border Radius Noise Texture Box Shadow Horizontal Length px Vertical

Box Shadow CSS Generator The ultimate CSS tools for web designers Gradient

  
<div class="col-100-max">
  <div class="col-50 p30 editor">

    <div class="col-50 p10">
      <label>Border Radius</label>
      <input type="range" id="radius" min="0" max="100" value="20">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="xradius" value="3">
    </div>
    <div class="clear bgg"></div>
    
    <div class="col-50 p10">
      <label>Border Radius Top Left</label>
      <input type="range" id="x1" min="0" max="100" value="20">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x11" value="20">
    </div>
    <div class="clear bgg"></div>
      
    <div class="col-50 p10">
      <label>Border Radius Top Right</label>
      <input type="range" id="x2" min="0" max="100" value="20">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x22" value="20">
    </div>
    <div class="clear bgg"></div>
      
    <div class="col-50 p10">
      <label>Border Radius Bottom Right</label>
      <input type="range" id="x3" min="0" max="100" value="20">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="x33" value="20">
    </div>
    <div class="clear bgg"></div>

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

    <div class="col-100 p10">
      <label>Box Color</label>
      <input type="color" id="color" value="#fcc42a">
        <div class="clear"></div>
    </div>
    <div class="col-100 p10 pt20">
		HEX <input type="text" class="hex" id="hex" size="7" maxlength="7" value="#fcc42a">
	</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="330">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="xwidth" value="330">
    </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="200">
    </div>
    <div class="col-50 p10 pt20">
      <input type="number" id="xheight" value="200">
    </div>
    <div class="clear"></div>
  </div>

  </div>


  <div class="col-50">
  <h1>Border Radius CSS 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