Rounded Corners using CSS

阅读更多

In web applications, one of the markups/decorations is rounded corners.

 

There are a lot of ways to do this, e.g.,  http://www.devwebpro.com/25-rounded-corners-techniques-with-css/.

 

Recently, I have the requirement to do this with minimal pictures envolved because pictures are considered not safe and using too much bandwidth, and thus are filtered out by some security firewalls.

 

One interesting post is here: http://blog.benogle.com/2009/04/29/css-round-corners/. Though the result has a little rough edge, it's better than plain text.

 

I need to extend this trick to a tabbed menu bar. All current practices I found are using pictures. So I come up with the following code.

 

	



	

		

			

				
				
				
   Home   
				
			
			

				
				
				
   Register   
				
			
		
	
	
			
	

	

 

The extension I did here is to make sure the "hover" function behaviors correctly.

 

 

 

Of course, using pictures provides a much better user experience.

• 
• 大小: 1.1 KB

• 查看图片附件