Rounded corners

Posted under » CSS on 02 September 2009

Method 1. Found this on VB on how they format their quotes. No graphics is needed. Put this on the css:

/* start of quote */

.bbcode_container {
	margin:20px;
	margin-top:5px;
	display:block;
}
	
.bbcode_container div.bbcode_quote, .trt_container div.bbcode_quote {
	margin:0 10px;
	margin-bottom: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #f2f6f8 none;
	border-radius: 5px;
	border: 1px solid #417394;
	font: normal 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
	position: relative;
	top: 0; }

.bbcode_quote div.quote_container {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 0px 10px 5px 10px;
}
/* end of quote.  */

And the HTML will look like this.

	

		

Text gooes here. 
		

Method 2 Formerly I was using this.

Then put this on the body.

    
•
    
•

    
•
    
•
    

       Test test, this is a rounded box
then I copy and paste text here Everybody loves rounded corners. Introduction A plethora of articles have been written about how to do it, but this is going to be different. This article is going to show you how to make rounded corners without images. That's right. Without images.
    
 

In general, I don't really like both methods because the curve size is not controllable (is too large). I prefer my own method.