I found the below code from a website teaching CSS tutorials. I have the code on my site, seen here.
However, ive been trying to figure out a way to get the box to the center of the page, and get rid of the pixel overlap on the right hand side, and bottom left.
Ive tried changing lots of things but cant seem to find the secret, any help is appreciated, thanks.
<style type="text/css" media="screen">

.rounded:before {
  background: transparent url(top-right.png) scroll no-repeat top right;
  margin-bottom: -20px;
  height: 10px;
  display: block;
  border: none;
  content: url(top-left.png);
  padding: 0px;
  line-height: 0.1;
  font-size: 1px;

.rounded:after {
  display: block;
  line-height: 0.1;
  font-size: 1px;
  content:  url(bottom-left.png);
  margin: 2px 0 0 0;
  height: 10px;
  background: transparent url(bottom-right.png) scroll no-repeat bottom right;
  padding: 0;
  .rounded * {
    padding-left: 16px;
    padding-right: 16px;


  .rounded {
  width: 50%;
    margin: 1em;
    padding: 0;

  p { 
    font-family: Arial, Tahoma  , sans-serif;
    font-size: 1em;
    padding-top: 0;
    margin: 1em 0;
    line-height: .01;


blockquote {
   background: #666666;
   color: white;
   margin-right: -1px;
   padding-left: 50px;


  p.quotee {
    text-align: right;
    margin: -1px 0;;
    font-weight: bold;
    color: #eee;

#corners img {
  margin: 1em;
  border: 1px solid black;
  padding: 0;
  background: #a0a0a0;

pre.rounded {
  background: #ffeed0;
<blockquote class="rounded">
Information Goes Here