Rounded corners using VML and CSS3

I came across a very interesting solution to the very popular problem of many webmasters - rounding blocks.
VML and CSS3 are used for this rounding option.

The solution without images , works in all Internet Explorer'ah including the 5th, in Firefox, in Safari, but unfortunately in older versions of Opera does not work.

VML (English Vector Markup Language - vector markup language) was developed by Microsoft to describe vector graphics. © wikipedia

I will not pull and immediately show you the css code:

  v \: roundrect {
      color: #FFF;
      display: block;
      background-color: # 000;
      padding: 20px;
      height: 100%;
      / * To round corners in other browsers * /
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      }

 / * For ie * /
 v \: roundrect {
      behavior: url (# default # VML);
      / background-color: transparent;
      } 

Likely you already understood, this css code for rounding corners in IE uses VML, and for other browsers uses CSS3.
')
Now the code of the blocks themselves:

  <! - Connect VML ->
 <xml: namespace ns = "urn: schemas-microsoft-com: vml" prefix = "v" />

 <v: roundrect arcsize = ". 04" fillcolor = "# 000">
 Hi, I'm a rounded block!
 </ v: roundrect> 

I will explain this code. The first line connects VML. The block parameter arcsize is responsible for the radius of rounding, fillcolor is responsible for the background of the block.

I will not argue that this method is the most correct, but it is also interesting and has the right to life.

View demo
Read the article with all the nuances

Subscribe to Chernev's notes.