Как добавить скругленные уголки в браузерах Safari и Chrome?

🕛 19.01.2009, 23:25

Браузеры Safari и Google Chrome поддерживают специфический атрибут -webkit-border-radius, его значением выступает радиус для всех уголков блока (пример 1).

Пример 1. Скругление для браузера Safari

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Скругленные уголки</title> <style type="text/css"> .corner { -webkit-border-radius: 8px; /* Радиус скругления для Safari и Chrome */ padding: 10px; border: 1px solid #000; background: #ead2c2; } </style> </head> <body> <div class="corner"> Управление полётом самолёта устойчиво участвует в погрешности определения курса меньше, чем ускоряющийся собственный кинетический момент, исходя из общих теорем механики. </div> </body>
</html>

Браузеры Safari и Chrome также поддерживают атрибуты, задающие радиус скругления для отдельных уголков:

-webkit-border-top-left-radius - верхний левый угол;
-webkit-border-top-right-radius - верхний правый угол;
-webkit-border-bottom-left-radius - нижний левый угол;
-webkit-border-bottom-right-radius - нижний правый угол.
Учтите, что создание скругления указанными способами приводит к невалидному стилевому коду, поскольку все приведенные атрибуты не входят в спецификацию CSS. Также методы не работают в браузерах Internet Explorer, Opera и Firefox.