Генератор закругленных углов для верстальщиков онлайн (CSS border-radius Generator)


Введите в поля по углам радиусы закруглений. Для каждого угла можно задать своё значение.
В html border radius используется опытными верстальщиками довольно часто. Свойство border radius формирует для элементов вёрстки скругленные углы css (в англоязычном звучании − rounded corners). Хотя эта возможность появилась только в css3, закругленные углы и так были реализуемы за счет поддержки его всеми современными версиями браузеров. Поэтому использование border radius кроссбраузерно верстается во многих случаях.

Осуществляется скругление углов в браузерах ie 9+, Mozilla Firefox 4.0+, Chrome 9+. Также поддерживают border radius opera 10.5+ и Safari 5+. Однако с border radius ie8 и более старые версии не совместимы, зато поддерживает border radius ie9. В ранних версиях браузеров Firefox скруглить углы можно посредством нестандартного свойства moz border radius, в Safari (Apple) и Chrome – посредством webkit border radius, в Konquerer – посредством khtml border radius.

Поскольку свойство css radius border пользуется популярностью у верстальщиков, создан универсальный инструмент, помогающий закруглить углы онлайн. Программа, представленная на сайте border-radius.ru, консолидирует все нестандартные правила и избавляет от необходимости держать их в голове. Теперь не придется беспокоиться о том, как сделать закругленные углы и обеспечить кроссбраузерность верстки: реализуемые в html закругленные углы с ней получаются без проблем.

Чтобы скруглить углы онлайн (у изображений − через border radius img), достаточно задать значения параметров в требуемых единицах измерения. В css3 border radius использует px, pt, em или проценты, тогда закругленные углы измеряются относительно ширины блока. По умолчанию установлено нулевое значение. Когда оформляются закругленные углы в ie и других браузерах, оно не наследуется.

Скругление углов css3 при помощи свойства border radius IE и иными браузерами возможно у всех элементов, исключая таблицы с border-collapse:collapse. Свойство корректно и если у объекта имеется css рамка (с закругленными углами впоследствии), и если не обозначена рамка: с закругленными углами инструмент справится, работая с фоном.

Скругление углов через задействование border radius IE и другими браузерами несложно. Стандартным свойством выбирается блок, который получит закругленные углы, − div (описывается как div border radius). Комплексное скругление углов онлайн подразумевает задание на всех четырех углах значений css border radius. Допустимо и избирательное закругление углов css:
  1. верхнего левого – через border radius top left;
  2. нижнего левого – через bottom border radius left;
  3. верхнего правого − через border radius top right;
  4. нижнего правого – через bottom border right radius.
border-raduis Скругление углов css проводится по 1−4 значениям, перечисленным через пробелы. Два значения, определяющих скругленные углы ie и прочих браузеров, можно задать через косую черту (слэш). Реализуя закругление углов, первое задает радиус по горизонтали, второе − по вертикали. Получаются так называемые эллиптические уголки. На рисунке изображен прямоугольник с закругленными углами, показывающий разницу между обычными скругленными и эллиптическими уголками.

Получить дополнительные сведения o border radius и почитать про закругление углов онлайн посредством css border radius ie и других браузеров можно на сайте w3.org/TR/css3-background/#the-border-radius. В спецификации на английском языке рассказано про закругленные углы css. Приведенная информация о том, как формировать css закругленные углы в ie и прочих браузерах, основана на материалах Jacob Bijani.