Скруглённые уголки. Как сделать круговую диаграмму в Excel Настройка и улучшение круговых диаграмм в Excel

Из этой обучающей статьи, посвященной круговым диаграммам, Вы узнаете, как создать такую диаграмму в Excel, как добавить или убрать легенду, как маркировать круговую диаграмму, показать проценты, как разбить или повернуть ее и многое другое.

Круговые диаграммы , известные также как секторные, используются для того, чтобы показать, какую часть от целого составляют отдельные суммы или доли, выраженные в процентах. В таких графиках весь круг – это 100%, в то время как отдельные сектора – части целого.

Публике нравятся круговые диаграммы, в то время как эксперты в области визуализации данных наоборот их терпеть не могут, и основная тому причина – человеческий глаз не способен точно сравнивать углы (сектора).

Если полностью отказаться от круговых диаграмм нельзя, то почему бы не узнать, как их строить правильно? От руки нарисовать круговую диаграмму сложно, учитывая запутанные процентные соотношения, которые представляют собой особую проблему. Однако, в Microsoft Excel построить круговую диаграмму можно буквально за пару минут. Затем достаточно уделить диаграмме еще несколько минут, воспользовавшись специальными настройками, чтобы придать ей более профессиональный вид.

Как построить круговую диаграмму в Excel

Построить круговую диаграмму в Excel очень легко, потребуется всего нескольких кликов. Главное, правильно оформить исходные данные и выбрать наиболее подходящий тип круговой диаграммы.

1. Подготавливаем исходные данные для круговой диаграммы

В отличии от других графиков Excel, круговые диаграммы требуют организации исходных данных в одном столбце или в одной строке. Ведь только один ряд данных может быть построен в виде круговой диаграммы.

Помимо этого, можно использовать столбец или строку с названиями категорий. Названия категорий появятся в легенде круговой диаграммы и/или в подписях данных. В общем круговая диаграмма в Excel выглядит наилучшим образом, если:

На диаграмме построен только один ряд данных.
Все значения больше нуля.
Отсутствуют пустые строки и столбцы.
Число категорий не превышает 7-9, поскольку слишком большое количество секторов диаграммы размоет ее и воспринимать диаграмму будет очень сложно.

В качестве примера для данного руководства, попробуем построить круговую диаграмму в Excel, опираясь на следующие данные:

2. Вставляем круговую диаграмму на текущий рабочий лист

Выделяем подготовленные данные, открываем вкладку Вставка (Insert) и выбираем подходящий тип диаграммы (о различных речь пойдет чуть позже). В этом примере мы создадим самую распространенную 2-D круговую диаграмму:

Совет: При выделении исходных данных не забудьте выбрать заголовки столбца или строки, чтобы они автоматически появились в наименованиях вашей круговой диаграммы.

3. Выбираем стиль круговой диаграммы (при необходимости)

Когда новая круговая диаграмма появилась на рабочем листе, можно открыть вкладку Конструктор (Design) и в разделе Стили диаграмм (Charts Styles) попробовать различные стили круговых диаграмм, выбрав тот, который больше всего подходит для Ваших данных.

Круговая диаграмма, заданная по умолчанию (Стиль 1) в Excel 2013, выглядит на рабочем листе следующим образом:

Согласитесь, данная круговая диаграмма выглядит немного простовато и, конечно же, требует кое-каких улучшений, к примеру, название диаграммы , и, возможно, стоит добавить более . Обо всем этом мы поговорим чуть позже, а сейчас познакомимся с типами круговых диаграмм, доступных в Excel.

Как создавать различные типы круговых диаграмм в Excel

При создании круговой диаграммы в Excel Вы можете выбрать один из следующих подтипов:

Это стандартный и самый популярный подтип круговой диаграммы в Excel. Чтобы создать её, кликните по иконке Круговая (2-D Pie) на вкладке Вставка (Insert) в разделе Диаграммы (Charts).

Объёмная круговая диаграмма в Excel

Объёмные круговые (3-D Pie) диаграммы очень похожи на 2-D диаграммы, но отображают данные на 3-D осях.

При построении объемной круговой диаграммы в Excel, появляются дополнительные функции, такие как .

Вторичная круговая или Вторичная линейчатая диаграммы

Если круговая диаграмма в Excel состоит из большого количества мелких секторов, то можно создать Вторичную круговую (Pie of Pie) диаграмму и показать эти незначительные сектора на другой круговой диаграмме, которая будет представлять один из секторов основной круговой диаграммы.

Вторичная линейчатая (Bar of Pie) очень похожа на Вторичную круговую (Pie of Pie) диаграмму, за исключением того, что сектора отображаются на вторичной гистограмме.

При создании Вторичной круговой (Pie of Pie) или Вторичной линейчатой (Bar of Pie) диаграмм в Excel, три последних категории будут по умолчанию перемещены во второй график, даже если эти категории больше остальных. Так как настройки по умолчанию не всегда являются самыми подходящими, можно сделать одно из двух:

Отсортировать исходные данные на рабочем листе в порядке убывания, чтобы наименьшие значения в итоге оказались на вторичной диаграмме.
Выбрать самостоятельно, какие категории должны оказаться на вторичной диаграмме.

Выбираем категории данных для вторичной диаграммы

Чтобы вручную выбрать категории данных для вторичной диаграммы, сделайте вот что:

Щелкните правой кнопкой мыши по любому сектору круговой диаграммы и в контекстном меню выберите Формат ряда данных (Format Data Series).
Параметры ряда (Series Options) в выпадающем списке Разделить ряд (Split Series By) выберите один из следующих вариантов:
- Положение (Position) – позволяет выбрать количество категорий, которые появятся во вторичной диаграмме.
- Значение (Value) – позволяет определить порог (минимальное значение). Все категории, не превышающие порога, будут перенесены на вторичную диаграмму.
- Процент (Percentage value) – то же самое, что и Значение (Value), но здесь указывается процентный порог.
- Другое (Custom) – позволяет выбрать любой сектор из круговой диаграммы на рабочем листе и указать, следует ли переместить его во вторичную диаграмму или оставить в основной.

В большинстве случаев порог, выраженный в процентах, – это самый разумный выбор, хотя все зависит от исходных данных и личных предпочтений. Данный скриншот показывает разделение ряда данных при помощи процентного показателя:

Дополнительно можно настроить следующие параметры:

Измените Боковой зазор (Gap between two charts). Ширина зазора устанавливается в процентном соотношении от ширины вторичной диаграммы. Чтобы эту ширину изменить, перетащите ползунок, либо вручную введите нужный процент.
Измените размер вторичной диаграммы. Этот показатель можно изменить с помощью параметра Размер второй области построения (Second Plot Size), который представляет размер вторичной диаграммы в процентах от размера основной диаграммы. Перетащите ползунок, чтобы сделать диаграмму больше или меньше, или введите нужные проценты вручную.

Кольцевые диаграммы

Кольцевая (Doughnut) диаграмма используется вместо круговой тогда, когда речь идет более, чем об одном ряде данных. Однако, в кольцевой диаграмме довольно-таки трудно оценить пропорции между элементами разных рядов, поэтому рекомендуется использовать другие типы диаграмм (например, гистограмму).

Изменение размера отверстия в кольцевой диаграмме

Создавая кольцевую диаграмму в Excel, первое, что необходимо сделать – это изменить размер отверстия. Это легко сделать следующими способами:

Настройка и улучшение круговых диаграмм в Excel

Если круговая диаграмма в Excel нужна только для того, чтобы быстро взглянуть на общую картину данных, то стандартная диаграмма, заданная по умолчанию, вполне подойдёт. Но если нужна красивая диаграмма для презентации или для каких-то подобных целей, то ее можно несколько улучшить, добавив парочку штрихов.

Как добавить подписи данных к круговой диаграмме в Excel

Круговую диаграмму в Excel гораздо легче понять, если на ней есть подписи данных. Без подписей трудно определить, какую долю занимает каждый сектор. На круговую диаграмму можно добавить подписи для всего ряда целиком или только для отдельного элемента.

Добавление подписей данных на круговые диаграммы в Excel

На примере этой круговой диаграммы мы покажем, как добавить подписи данных для отдельных секторов. Для этого кликаем по иконке Элементы диаграммы (Chart Elements) в верхнем правом углу круговой диаграммы и выбираем опцию Подписи данных (Data Labels). Здесь же можно изменить расположение подписей, нажав на стрелку справа от параметра. По сравнению с другими типами диаграмм, круговые диаграммы в Excel предоставляют наибольший выбор расположения подписей:

Если хотите, чтобы подписи были показаны внутри выносок за пределами круга, выберите Выноска данных (Data Callout):

Совет: Если Вы решили поместить подписи внутри секторов диаграммы, обратите внимание на то, что черный текст, установленный по умолчанию, читается трудно на фоне тёмного сектора, как, к примеру, в случае с темно-синим сектором на картинке выше. Чтобы читать было легче, можно изменить цвет подписи на белый. Для этого кликаем на подпись, затем на вкладке Формат (Format) нажимаем Заливка текста (Text Fill). Кроме того, можно изменить .

Категории в подписях данных

Если круговая диаграмма в Excel состоит более, чем из трех секторов, то подписи можно добавить непосредственно к каждому сектору, чтобы не заставлять пользователей метаться между легендой и диаграммой в поисках информации о каждом секторе.

Самый быстрый способ сделать это – выбрать один из готовых макетов на вкладке Конструктор > Макеты диаграмм > Экспресс-макеты (Design > Chart Styles > Quick Layout). Макет 1 и Макет 4 содержат названия категорий в подписях данных:

Для доступа к другим параметрам кликните иконку Элементы диаграммы (Chart Elements) в правом верхнем углу круговой диаграммы, нажмите на стрелку рядом с пунктом Подписи данных (Data Labels) и выберите Дополнительные параметры (More options). Появится панель Формат подписей данных (Format Data Labels) в правой части рабочего листа. Перейдите в раздел Параметры подписей (Label Options) и отметьте галочкой параметр Имя категории (Category Name).

Кроме того, можно воспользоваться следующими возможностями:

Под заголовком Включать в подпись (Label Contains) выберите данные, которые должны содержаться в подписях. В нашем примере это Имя категории (Category Name) и Значение (Value).
В выпадающем списке Разделитель (Separator) выберите, как разделить данные в подписях. В нашем примере выбран разделитель Новая строка (New Line).
Под заголовком Положение метки (Label Position) выберите, где установить подпись. В нашем примере выбрано У края снаружи (Outside End).

Совет: Теперь подписи данных добавлены к круговой диаграмме, легенда больше не нужна и ее можно удалить, нажав на иконку Элементы диаграммы (Chart Elements) и убрав галочку рядом с пунктом Легенда (Legend).

Как показать проценты на круговой диаграмме в Excel

Когда исходные данные в круговой диаграмме выражены в процентах, знаки % появятся на диаграмме автоматически, как только будет включен параметр Подписи данных (Data Labels) в меню Элементы диаграммы (Chart elements) или параметр Значение (Value) на панели Формат подписей данных (Format Data Labels), как показано в примере выше.

Если же исходные данные выражены в числах, то Вы можете показать в подписях либо исходные значения, либо проценты, либо то и другое.

Кликните правой кнопкой мыши по любому сектору круговой диаграммы и в контекстном меню выберите Формат подписей данных (Format Data Labels).
В появившейся панели отметьте галочками параметры Значение (Value) и/или Доли (Percentage), как показано в примере. Excel рассчитает проценты автоматически, исходя из того, что вся круговая диаграмма представляет собой 100%.

Разбиваем круговую диаграмму или выделяем отдельные сектора

Чтобы подчеркнуть отдельные значения круговой диаграммы, можно разбить ее, т.е. отделить все сектора от центра диаграммы. Также можно выделить конкретные сектора, отодвинув от основной диаграммы только их.

Фрагментированные круговые диаграммы в Excel могут быть в 2-D или 3-D формате, кольцевые диаграммы также можно разбить.

Как разбить круговую диаграмму в Excel

Самый быстрый способ разбить круговую диаграмму в Excel – кликнуть по ней, чтобы выбрать все сектора, а затем перетащить их подальше от центра диаграммы с помощью мыши.

Для того, чтобы более точно настроить разбивку круговой диаграммы, необходимо выполнить следующие действия:

Как выделить отдельные сектора круговой диаграммы

Чтобы обратить внимание пользователя на определённый сектор круговой диаграммы, можно выдвинуть этот сектор из общего круга диаграммы.

Повторю: самый быстрый способ выдвинуть отдельные сектора диаграммы – это выделить их и отодвинуть от центра с помощью мыши. Чтобы выделить отдельный сектор, нужно кликнуть по нему дважды.

Есть другой способ: выделите сектор, который нужно выдвинуть, кликните по нему правой кнопкой мыши и в контекстном меню нажмите Формат ряда данных (Format Data Series). Затем в появившейся панели откройте раздел Параметры ряда (Series Options) и настройте параметр Вырезание точки (Point Explosion):

Замечание: Если необходимо выделить несколько секторов, то потребуется повторить этот процесс с каждым из них, как показано выше. Выделить сразу несколько секторов круговой диаграммы в Excel невозможно, но можно разбить диаграмму полностью, либо выделить только один сектор за раз.

Как развернуть круговую диаграмму в Excel

При создании круговой диаграммы в Excel, порядок построения категорий зависит от порядка расположения данных на рабочем листе. Чтобы показать данные с разных точек зрения, можно поворачивать круговую диаграмму на 360 градусов. Как правило, круговая диаграмма выглядит лучше, если самые маленькие ее сектора находятся спереди.

Чтобы повернуть круговую диаграмму в Excel, необходимо выполнить следующие действия:

Кликните по диаграмме правой кнопкой мыши и выберите Формат ряда данных (Format Data Series).
На появившейся панели в разделе Параметры ряда (Series Options) переместите ползунок параметра Угол поворота первого сектора (Angle of first slice), чтобы развернуть диаграмму, либо введите необходимое значение вручную.

Вращение объёмных круговых диаграмм

Для объёмных круговых диаграмм доступна опция Поворот объёмной фигуры (3-D Rotation). Чтобы получить доступ к этой опции, необходимо кликнуть правой кнопкой мыши по любому сектору диаграммы и в контекстном меню выбрать Поворот объёмной фигуры (3-D Rotation).

Появится панель Формат области диаграммы (Format Chart Area), где можно настроить следующие параметры поворота объёмной фигуры:

Горизонтальное Вращение вокруг оси Х (X Rotation)
Вертикальное Вращение вокруг оси Y (Y Rotation)
Угол обзора – параметр Перспектива (Perspective)

Замечание: Круговые диаграммы в Excel могут вращаться вокруг горизонтальной оси и вертикальной оси, но не вокруг оси глубины (ось Z). Поэтому параметр Вращение вокруг оси Z (Z Rotation) недоступен.

Если в полях для ввода углов поворота нажимать на стрелки вверх или вниз, то диаграмма тут же будет поворачиваться. Таким образом, можно производить маленькие изменения угла поворота диаграммы до тех пор, пока она не окажется в нужном положении.

Как упорядочить сектора круговой диаграммы по размеру

Как правило, круговые диаграммы более понятны, если их сектора отсортированы от больших к меньшим. Самый быстрый способ добиться такого результата – отсортировать исходные данные на рабочем листе. Если не получается отсортировать исходные данные, то можно изменить расстановку секторов в круговой диаграмме Excel следующим образом:

Как изменить цвета в круговой диаграмме

Если стандартные цвета круговой диаграммы в Excel Вас не устраивают, есть несколько выходов:

Меняем цветовую схему круговой диаграммы в Excel

Чтобы выбрать другую цветовую схему для круговой диаграммы в Excel, необходимо кликнуть по иконке Стили диаграмм (Chart Styles), открыть вкладку Цвет (Color) и выбрать подходящую цветовую схему. Иконка появляется при выделении диаграммы справа от нее.

Также можно кликнуть мышкой по любой точке круговой диаграммы, чтобы на Ленте меню появилась группа вкладок Работа с диаграммами (Chart Tools) и на вкладке Конструктор (Design) в разделе Стили диаграмм (Chart Styles) щелкнуть по кнопке Изменить цвета (Change Colors):

Выбираем цвета для каждого сектора по отдельности

Как видите на картинке выше, выбор цветовых схем диаграмм в Excel не богат, и если необходимо создать стильную и яркую круговую диаграмму, то можно выбрать свой цвет для каждого сектора. Например, если расположены внутри секторов диаграммы, то нужно учесть, что черный текст с трудом читается на фоне темных цветов.

Чтобы изменить цвет отдельного сектора, выделите его, дважды кликнув по нему мышью. Затем откройте вкладку Формат (Format), нажмите Заливка фигуры (Shape Fill) и выберите необходимый цвет.

Совет: Если на круговой диаграмме Excel присутствует большое количество маленьких не особо важных секторов, то можно окрасить их в серый цвет.

Как настроить оформление круговой диаграммы в Excel

Если Вы создаете круговую диаграмму в Excel для презентации или для экспорта в другие приложения, то можно придать ей более привлекательный вид.

Чтобы открыть параметры форматирования, кликните правой кнопкой мыши по любому сектору круговой диаграммы и в контекстном меню нажмите Формат ряда данных (Format Data Series). В правой части рабочего листа появится панель. На вкладке Эффекты (Effects) поэкспериментируйте с опциями Тень (Shadow), Подсветка (Glow) и Сглаживание (Soft Edges).

На вкладке Формат (Format) доступны и другие полезные инструменты форматирования:

Изменения размеров круговой диаграммы (высота и ширина);
Изменения заливки и контура фигуры;
Использование различных эффектов для фигуры;
Использование стилей WordArt для текстовых элементов;
И многое другое.

Чтобы воспользоваться этими инструментами форматирования, выделите элемент круговой диаграммы, который нужно отформатировать (легенду, подпись данных, сектор или название диаграммы) и откройте вкладку Формат (Format). Подходящие опции форматирования будут активны, а ненужные – не активны.

Теперь, когда Вы знаете, как построить круговую диаграмму в Excel, давайте попробуем составить список наиболее важных рекомендаций, которые помогут сделать ее как привлекательной, так и содержательной:

Сортируйте сектора по размеру. Чтобы круговая диаграмма была более понятной, необходимо сортировать сектора от больших к меньшим или наоборот.
Группируйте сектора. Если круговая диаграмма состоит из большого количества секторов, лучше всего их группировать, а затем использовать отдельные цвета и оттенки для каждой группы.
Незначительные маленькие сектора окрасьте в серый цвет. Если круговая диаграмма содержит маленькие сектора (менее 2%), окрасьте их в серый цвет или объедините в отдельную категорию под названием Прочие.
Поверните круговую диаграмму , чтобы самые маленькие сектора оказались впереди.
Избегайте слишком большого количества категорий данных. Слишком большое количество секторов на диаграмме выглядит как нагромождение. Если категорий данных слишком много (более 7), то выделите маленькие категории во вторичную круговую или вторичную линейчатую диаграмму.
Не используйте легенду. Добавляйте подписи непосредственно к секторам круговой диаграммы, чтобы читателям не приходилось метать взгляд между секторами и легендой.
Не увлекайтесь 3-D эффектами. Избегайте большого количества 3-D эффектов в диаграмме, поскольку они могут значительно исказить восприятие информации.

А данные Кольцевая диаграмма отображает значение в процентах от всего и это формат диаграммы доступны для использования в Microsoft PowerPoint 2010 и 2013 годах Категории представлены отдельными кусочками. Кольцевая графики функционально идентичны секторные диаграммы в том смысле, что вы можете отобразить практически одни и те же данные. Есть два типа диаграмм: пончик пончик и взорвался пончик.

Основной способ создания пончика диаграммы с помощью галереи при вставке диаграммы.

Выберите Вставить -> Chart, а затем выберите Пончик из списка.

Теперь вы можете настроить диаграмму путем добавления данных в таблицу. Если вам нужно добавить новую серию данных с концентрической окружности в графике, вы можете добавить новый столбец в выборке данных в электронной таблице.

Другой способ сделать Кольцевая диаграммы в PowerPoint 2010

Вот еще один основной способ добавить диаграмму пончика диаграммы в PowerPoint из простой круговой диаграммы.

Мы начинаем создание простой круговой диаграммы в PowerPoint. Основной круговая диаграмма в PowerPoint 2010 можно вставить с помощью диаграммы галереи.

Настройка круговой диаграммы для отображения данных, которые вы хотите. Затем добавьте простой круг в центре круговой диаграммы.

Теперь повторите процесс и добавить дополнительный концентрический круг в центре первого круга формы, который был добавлен.

Теперь, давайте заполнить первую форму с белым фоном и второй формы (внутренний один) с хорошим фоном стиле. Вы можете использовать градиенты, например радиальный стиль градиента плюс хороший эффект тени.

Здесь у вас есть отдельные элементы, которые мы будем использовать, чтобы составить график пончика. Два кружил формы и круговой диаграммы.

Вы можете настроить внутренний круг путем изменения свойств формата Shape.

И, наконец, наша редактируемые кольцевая диаграмма будет выглядеть следующим образом.

Вы можете узнать больше о том, как представить свои данные в тороидальной диаграмме, скачать шаблоны диаграмм пончика или вы можете скачать бесплатно PowerPoint и диаграммы шаблонов. Если вам нужен этот шаблон, не стесняйтесь обратиться к нам, мы можем любезно послать его к вам.

В интернете много примеров и руководств по закруглению углов у блока или таблиц, но, как правило, данные руководства основаны на использовании изображений или на использовании дополнительных блоков.

В сегодняшнем руководстве я покажу, как можно закруглить углы таблицы, используя только CSS .

Непосредственно разметка (Вторая таблица отличается компоновкой ячеек в верхней строке):

Curabitur a ultricies urna	Phasellus mollis
eget venenatis est tortor et est.	0
Fusce sollicitudin metus quis libero auctor vestibulum.	0

Nulla gravida.	Urna augue.	Nunc iaculis bibendum.
		Vestibulum tempor	Laoreet eros semper ut.
Vivamus quis nisi lacus.	Cras id felis eu purus tempor dictum in at lorem.	facilisis iaculis magna diam id quam. eleifend.	Pellentesque cursus, nunc ut facilisis hendrerit

1. Закругляем углы непосредственно у таблицы (тег table).

BContentTables{ border:1px solid #CCCCCC; width:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius: 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px; /* CSS3 */ overflow:hidden; margin:0.7em auto; }

2. Убираем любой фон у первой строки.

Tr.bCTable_Header {background: none;}

3. При помощи псевдокласса:first-child и комбинатора > выбираем первую ячейку в таблице. Закругляем у первой ячейки левый верхний угол. Фон первой строки складывается из фона ячеек данной строки.

Tr.bCTable_Header:first-child > td:first-child{ border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms-border-radius:10px 0 0 0; -o-border-radius:10px 0 0 0; -khtml-border-radius: 10px 0 0 0; } tr.bCTable_Header td{ color:white; font-size:110%; background-color:#00843C;}

4. При помощи псевдокласса:last-child и комбинатора > выбираем последнюю ячейку в первой строке. Для нее закругляем правый верхний угол.

Tr.bCTable_Header:first-child > td:last-child{ border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms-border-radius:0 10px 0 0; -o-border-radius:0 10px 0 0; -khtml-border-radius: 0 10px 0 0; }

5. У последней строки закругляем нижние углы. Не забудьте удалить фон у последней строки; фон строки задается посредством фона ячеек последней строки.

BContentTables tr:last-child{ border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; background:none; }

6. Затем по аналогии с пунктами 3-4 в последней строке закругляем углы у первой и крайней ячейки.

BContentTables tr:last-child td{background-color:#F1F1F2;} .bContentTables tr:last-child td:first-child{ border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;} .bContentTables tr:last-child td:last-child {border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border-radius:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0; }

Поддержка браузерами

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код	Описание	Вид
div { border-radius: 10px; }	Радиус скругления для всех уголков сразу.
div { border-radius: 0 10px; }	Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div { border-radius: 20px 10px 0; }	Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div { border-radius: 20px 10px 5px 0; }	Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Радиус

Меня - супплетивная форма винительного падежа от я.

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.

Пример 2. Круглая кнопка

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Кнопка