svidgen.com - HTML/CSS Rounded Corner Generator

HTML/CSS Rounded Corner Generator

See if you like it:

Your box with rounded corners will look like this!

Copy the CSS to your stylesheet:

  body {
   background-color: #ffffff;
  }
 
  .container {
   position: relative;
   color: #404040;
   background-color: #eeffff;
   padding: 16px;
   border: 2px #000000 solid;
  }

  div.corner {
   position: absolute;
   width: 16px;
   height: 16px;
   border: 0px;
   margin: 0px;
   padding: 0px;
   background-attachment: scroll;
   background-image: url(circle.png);
   overflow: hidden;
  }

  div.top_left {
   top: -2px;
   left: -2px;
   background-position: 0px 0px;
  }

  div.top_right {
   top: -2px;
   right: -2px;
   background-position: 16px 0px;
  }

  div.bottom_left {
   bottom: -2px;
   left: -2px;
   background-position: 0px 16px;
  }

  div.bottom_right {
   bottom: -2px;
   right: -2px;
   background-position: 16px 16px;
  }

Copy the HTML to your page:

<div class='container'>
	<div class='corner top_left'></div>
	<div class='corner top_right'></div>
	<div class='corner bottom_left'></div>
	<div class='corner bottom_right'></div>

	Put content inside here!
	
</div>

HTML/CSS Rounded Corner Generator

Configure the corners:

Configure the color scheme:

See if you like it:

Copy the CSS to your stylesheet:

Copy the HTML to your page:

Save the circle image to your server as circle.png:

Replace "Put content inside here!" with whatever HTML you like!