Блок с закругленными углами на CSS3

Еще один полезный CSS-стиль третьей версии — border-radius, позволяющий закруглить углы у блока. Браузеры-лидеры последних версий поддерживают данный стиль, Internet Explorer потихоньку подтягивается и в 9 версии также научился закруглять углы.

Пример использования стиля border-radius:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      .box {background: #F2F213; width: 400px; height: 200px;}
      .round-corners {border-radius: 20px;}
    </style>
  </head>
  <body>
    <div class="box round-corners"></div>
  </body> 
</html>

В данном примере стилю задано единственное значение, определяющее радиус закругления всех углов блока. Можно указать радиус отдельно для каждого угла, подобно стилям padding и margin.

В вашем браузере этот блок выглядит так:

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий