Как закруглить края в css

Как скруглить края в css

Пример CSS кода для создания эффекта закругленных углов у HTML блока (например div). Ниже созданим класс round-corner , который будет создавать закругленные углы у блоков div:

Данный CSS код будет стабильно отображаться в большинстве браузеров. Ниже представлен HTML код:

Результат:

Как закруглить каждый угол по отдельности?

Чтобы закруглить только один или несколько углов, используйте расширенное правило для border-radius :

В примере выше мы установили размер 1em для левого верхнего угла, 2em для правого верхнего угла, 3em для правого нижнего и 4em для левого нижнего углов соответственно (по часовой стрелке).

Результат:

Дополнительные примеры

Следующий CSS код закруглит на 1em левый верхний угол, на 3px правый верхний и левый нижний, а также на 5em правый нижний:

Результат:

Код ниже закруглит на 1em правый верхний и левый нижний углы, а также на 5em левый верхний и правый нижний:

Результат:

Как закруглить края в css

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

1. Внутри блока с указываем элемент для основного содержимого ( «content_block» ) перед которым ставим блоки для имитации закругления углов ( «b1» , «b2» , «b3» ). После него мы ставим их же, но в обратной последовательности.
2. Задаем блокам для имитации необходимую высоту и боковые поля (CSS margin), чтобы создать видимость уголков. Также обнуляем у них размер шрифта (CSS font-size) и задаем overflow:hidden — это предназначено для старых браузеров, которые могут увеличить высоту и сделать ее больше указанной.
3. В этом примере кроме закругления углов была еще добавлена и имитация рамки, если она вам не нужна, то просто уберите у элементов все «бордеры», а у блока «b3» уберите фоновый цвет.

Самый простой способ, с помощью которого можно сделать в CSS видимость закругленных углов — это использование изображения в качестве фона для элемента. При этом обычно размеры элемента указываются такие же, как и размер фоновой картинки. Минус этого способа в том, что содержимое элемента не должно выходить за его рамки, то есть должно быть определенного ограниченного размера.

1. С помощью свойства CSS background задаем блоку фоновое изображение, которому запрещаем размножение по вертикали и горизонтали (no-repeat), так как в данном случае это не требуется.
2. Чтобы текст внутри блока не прилегал к его краям, устанавливаем у него внутренние отступы (CSS padding) по 5px с каждой стороны.
3. Далее необходимо задать блоку такие же размеры, как и у фона. Фоновая картинка у нас имеет размеры 140×32 пикселя, однако самому блоку указываем ширину (CSS width) и высоту (CSS height) с уменьшением на 10px. Уменьшить пришлось из-за тех самых внутренних отступов, которые тоже расширяют элемент на 5px в каждую сторону.

В предыдущем примере размер блока у нас был фиксированный и зависел от размера фоновой картинки, а это очень неудобно. Сейчас мы сделаем так, чтобы ширина нашего блока была изменяемой. Для этого вырежем у изображения три части — боковушки и кусочек центра. Затем поместим внутрь основного блока два элемента с фиксированными размерами, которые, благодаря абсолютному позиционированию, разместим у него по бокам. В качестве фона зададим им те самые боковые части, а основному блоку — центральную часть. Так у нас получится блок с закругленными углами, у которого будет изменяемая ширина.

1. Внутрь блока помещаем два элемента — «left_bok» и «right_bok» , которым в качестве фона (CSS background) задаем изображения боковых частей и запрещаем им размножение (no-repeat). Самому основному блоку задаем фон из центральной части и разрешаем ему дублироваться только по горизонтали (repeat-x).
2. Указываем для боковых блоков ширину, соответствующую размеру фона, у нас это 14×32 пикселя. А вот основному блоку, как и в предыдущем примере, задаем высоту равную 22px, чтобы компенсировать вертикальные отступы.
3. Позиционировать наши боковушки будем относительно «block» , поэтому указываем у него position:relative, а у самих боковушек — absolute. Ну а потом прижимаем их к соответствующим сторонам родителя с помощью свойств CSS top, left и right.
4. Чтобы содержимое блока не скрывалось под боковыми картинками, устанавливаем у «block» боковые внутренние отступы (CSS padding), которые могут быть равны или немного больше самих боковушек. Также задаем небольшие отступы сверху и снизу, чтобы текст «не прилипал» к краям.

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

1. С помощью псевдоэлементов CSS :before и :after указываем, что мы хотим что-то добавить в начало и конец основного блока. А, используя свойство CSS content, как раз и добавляем необходимые изображения закругленных углов, а точнее боковушек. Так мы создали два псевдоэлемента с изображениями.
2. Ну а дальше мы проделываем все абсолютно то же самое, что и в предыдущем примере, только работаем уже с созданными псевдоэлементами.

1. Как вы знаете, IE6 и IE7 не понимают использованные здесь псевдоэлементы, поэтому делаем следующее. Применяем expression, который интегрирует внутрь основного элемента два тега , а уже им мы задаем такие же стили, что и в предыдущем примере. Обратите внимание, что внедряемый код, идущий после первого innerHTML , добавляется сразу после открывающего тега «block» , а после второго innerHTML  — перед закрывающим тегом. Да, в нашем случае это значения не имеет, так как используется абсолютное позиционирование, но иногда об этом полезно знать.
2. Чтобы этот код не увидели другие браузеры, заключаем его в условные комментарии. Будет лучше, если его вообще вынести в отдельный CSS-файл, который подключить тегом закрытым теми же комментариями.

Суть этого способа заключается в том, что сначала у изображения вырезаются уголки. Затем внутрь основного блока помещается еще несколько блоков (по количеству уголков), которые вложены друг в друга. Каждому из них в качестве фона задается один уголок-изображение. Изображениям запрещают размножение и задают координаты, чтобы они заняли места по углам блоков. Таким образом и получается эффект закругленных углов.

1. Внутрь основного блока помещаем еще четыре. Так как ни у одного из этих блоков не установлены поля или рамки, а отступы есть только у самого внутреннего, то по высоте и ширине все они оказываются равны.
2. Используя свойство CSS background, устанавливаем каждому из внутренних блоков уголок в качестве фона, запрещаем им размножение и позиционируем по углам блоков. А так как цвет фона у элементов прозрачный, то все четыре фоновых уголка видно на странице.
3. Добавляем самому внешнему блоку с уголком нужный фоновый цвет. Все, готово.

Здесь тоже вырезаются уголки для фона, который будет указан у маленьких блоков. С помощью абсолютного позиционирования CSS эти блоки расставляются по углам основного элемента, которому задается нужный цвет фона.

1. Внутри основного элемента ( ) размещаем четыре тега с классами «corn_lt» , «corn_rt» , «corn_lb» , «corn_rb» , которые будут выступать в качестве блоков-углов.
2. С помощью свойства CSS background подключаем к каждому блоку-уголку свое фоновое изображение и задаем им ширину и высоту равную по размеру этим фоновым картинкам. На всякий случай обнуляем размер шрифта (CSS font-size) и делаем обрезание лишнего (CSS overflow).
3. Указываем для основного элемента относительное позиционирование (CSS position:relative), так как позиционировать блоки-уголки будем относительно него, а для самих уголков — абсолютное (absolute).
4. Используя свойства CSS top, right, bottom и left, указываем для блоков-уголков расстояния смещений по вертикали и горизонтали, чтобы они расположились по углам основного блока.

1. Если у «block» не указать явно ширину, то уголки слева не встанут на место. Причиной этого является наличие внутренних отступов у блока. Самый простой способ исправить проблему — убрать отступы и заключить основное содержимое «block» (без уголков) в дополнительный блок-обертку, а уже у обертки указать нужные отступы. Но я здесь сделал по-другому, включив layout с помощью свойства zoom :1, которое говорит IE6 отображать элемент в натуральный размер. Это свойство невалидно, поэтому, если вы решите использовать именно его, то рекомендую вам сделать подключение через условные комментарии.
2. Тот самый однопиксельный баг, который рассматривался выше. Но здесь зазоры могут образоваться не только между правыми уголками и правой стороной блока, но и внизу. И если от зазоров справа мы избавились, то с нижними так не получится. Выход — указывать явно четную ширину и высоту основного элемента. Можно задать и нечетные значения, но тогда надо будет установить расстояния смещений вниз и вправо равные не нулю, а -1px.

По сути, технология этого способа закругления углов в CSS такая же, как и в предыдущем, поэтому подробные комментарии тут будут опущены. Единственное отличие — вместо отдельных фоновых изображений-уголков здесь используется одна общая картинка-спрайт. Благодаря этому ускоряется загрузка сайта, ведь одно изображение «весит» меньше, чем четыре и к хостингу идет одно обращение вместо четырех.

1. С помощью свойства CSS background подключаем к блокам-уголкам фоновую картинку-спрайт, которая имеет округлую форму с размерами 22×22 пикселя (11х11 пикселей каждая четвертинка-уголок).
2. Используя свойство CSS background-position, указываем координаты смещения фона. Например, значение -11px 0 означает, что фон будет смещен влево на 11px по оси X, а по оси Y смещен не будет. Таким образом, левая половина спрайта уходит за границу элемента и остается только правая. Но и нее видно лишь наполовину, так как в высоту она равна 22px, а высота самого блока-уголка всего 11px. Вот и получается, что при данном значении фоном элемента станет правая верхняя четверть спрайта.

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

1. Используя псевдоэлементы :before и :after, создаем у основного блока два элемента.
2. Делаем псевдоэлементы блочными с помощь свойства CSS display:block, в результате чего они занимают всю ширину основного блока, причем один располагается над содержимым блока, а второй — под.
3. Наши изображения с уголками имеют размеры 11×11 пикселей, поэтому делаем высоту (CSS height) псевдоэлементов тоже равную 11px, так как уголки будут находиться внутри них.
4. С помощью свойства CSS content добавляем в каждый псевдоэлемент по одному закругленному уголку — левый верхний и левый нижний.
5. Правые уголки у нас будут в виде фона псевдоэлементов, их мы указываем, используя background, и с помощь него же позиционируем их в правую сторону и запрещаем «размножение». Все, уголки готовы.
6. Так как у «block» мы указали внутренние отступы (CSS padding), то псевдоэлементы, а соответственно и уголки, не находятся по углам блока, а отступают от краев на 15px. Чтобы это исправить, с нужных сторон задаем псевдоэлементам отрицательные поля (CSS margin) для расположения их поверх отступов. Но поля делаем равными не 15, а 17px, это необходимо, чтобы накрыть рамку (CSS border), ширина которой равна 2px (15+2=17). Вот теперь все.

1. С помощью expression интегрирует внутрь основного элемента два тега , которые тоже преобразуем в блоки. Затем помещаем в них по одному тегу . А дальше у этих тегов указываются те же свойства, что и у псевдоэлементов. Единственно, что им дополнительно добавляем свойство CSS position:relative, без которого рамка перекрывает уголки.

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

Скругленные углы с CSS и JavaScript

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

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

Несколько лет назад это было бы приемлемым решением. Сегодня это отвратительный взлом: это очень много избыточной разметки для относительно неважного визуального оформления. Фактически, приведенный выше код даже не будет работать должным образом в документах, обслуживаемых с использованием строгого типа документа: под угловыми изображениями будут появляться небольшие пробелы, вызванные тем, что изображения являются встроенными элементами и, следовательно, оставляют пространство под изображением «хвосты» на буквы, такие как «у» и «J». Решение, как объяснил Эрик Мейер в книге «Изображения, таблицы и загадочные пробелы» , заключается в добавлении следующего правила в таблицу стилей:

Это дает желаемый результат, как показано здесь .

Но теперь мы используем CSS-хаки, чтобы исправить некрасивые хаки таблиц! Давайте посмотрим, как реализовать тот же эффект, используя только CSS.

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

Фоновые изображения CSS – удивительно мощные вещи. Вам нужно только взглянуть на множество замечательных дизайнов, представленных в CSS Zen Garden, чтобы убедиться в этом. Используя CSS, фоновое изображение может быть применено к любому элементу на странице. Кроме того, это может повторяться горизонтально, вертикально или вообще не повторяться; он может быть расположен в пределах фоновой области изображения с использованием абсолютных измерений или относительно одного из четырех углов; это может быть даже сделано, чтобы оставаться фиксированным на месте, когда содержимое элемента прокручивается. К сожалению, CSS 2 накладывает одно небольшое, но существенное ограничение: вы можете применять только одно фоновое изображение к каждому элементу на странице. Чтобы правильно отобразить закругленные углы на нам нужно применить четыре фоновых изображения, по одному в каждом углу.

Фиксированные коробки ширины

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

Коробка с закругленными углами была бы не очень веселой, если бы в ней не было содержимого. Учтите следующее:

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

Нажмите здесь, чтобы увидеть результаты.

Хорошо структурированные документы, как правило, полны таких хуков, которые можно осторожно использовать для применения нескольких фонов и достижения определенных визуальных эффектов. Обучение их идентификации является важной частью работы с CSS.

Вложенные элементы

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

Код отображается как показано здесь .

Должно быть понятно, что здесь происходит. Каждому из четырех делителей назначается фоновое изображение с закругленными углами, расположенное в верхнем правом, верхнем левом, нижнем правом и нижнем левом углу соответственно. Несмотря на то, что ширина содержащего элемента div равна 200px, его можно также легко установить на что-то более гибкое для использования с жидкими конструкциями – углы все равно будут работать, независимо от того, насколько большим или маленьким был элемент div.

Теперь у нас есть решение проблемы, которое использует гораздо меньше разметки, чем в исходном примере таблиц. Но он все еще не идеален: он использует три дополнительных элемента div, которые ничего не добавляют к общей структуре документа. Можем ли мы сделать лучше? Пришло время взглянуть на JavaScript.

Использование DOM

Используя JavaScript и DOM, можно манипулировать структурой документа после его загрузки браузером. Закругленные углы – это эффект представления, который можно скрыть от пользовательских агентов, не являющихся JavaScript, без какого-либо существенного сокращения их общего восприятия сайта, поэтому нет никаких этических проблем с использованием JavaScript для такого рода преобразований. Наше окончательное решение потребует только одного в исходном документе. Мы будем использовать JavaScript для динамического добавления трех посторонних элементов, необходимых для эффекта закругленного угла.

Я думаю, вы согласитесь с тем, что мы не можем многое сделать, чтобы сделать его проще, за исключением, может быть, замены на

если содержание структурно лучше определено как абзац. Выполнение этого переключения оставлено в качестве упражнения для читателя.

Теперь вот JavaScript:

Сценарий состоит из двух логических разделов. Первый раздел перебирает все элементы в документе, создавая массив тех элементов, которые содержат ’rounded’ в своем атрибуте class (помните, что элементы могут иметь несколько классов, разделенных пробелами). Вторая часть сценария проходит по очереди каждый из этих элементов, создавая три дополнительных элемента div и оборачивая их вокруг оригинала. Давайте посмотрим на код для этого более подробно:

Здесь мы полностью удаляем класс «rounded» из нашего исходного . Причина этого станет ясна в CSS; по сути, мы не хотим, чтобы применяемые оригинальные стили больше влияли на этот элемент.

Мы создали самый внешний , который будет использоваться для применения фонового изображения в верхнем правом углу, а также общей ширины рамки. Обратите внимание, что мы установили класс в ’rounded2′; это будет определено в нашем CSS, с небольшими отличиями от ’rounded’ класса, предоставляемого клиентам без поддержки JavaScript.

W3C DOM не предоставляет прямой метод замены узла в документе другим узлом. Вместо этого вы должны использовать метод replaceChild() узла, чтобы заменить одного из его дочерних узлов другим узлом. Полезный прием для замены рассматриваемого узла – получить доступ к своему собственному родителю с parentNode свойства parentNode , а затем использовать /#c#.replaceChild, чтобы заменить его на что-то другое. Если это не имеет смысла для вас, не беспокойтесь – просто представьте, что приведенная выше строка заменяет наш оригинальный узел новым узлом tr мы только что создали.

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

На этом этапе наше фактическое дерево документов почти идентично дереву в примере с четырьмя вложенными тегами , с той лишь разницей, что внешний элемент имеет класс ’rounded2′ вместо ’rounded’ . Вот CSS:

Первый набор правил для div.rounded используется только в браузерах, которые не выполняют JavaScript. Обратите внимание, что ширина составляет 170px, а отступ – 15px, что в сумме составляет 200px (ширина плюс отступы слева и справа). Если вам это нужно для работы в IE 5 / Windows, которая по-разному интерпретирует значения отступов, вам нужно будет применить позорную модель блочной модели . Вы уже видели второй набор правил в предыдущем примере.

Заглядывая вперед

Вышеупомянутая методика будет работать во всех современных браузерах и во всех будущих браузерах, которые поддерживают стандарты CSS2 и DOM 2. CSS 3 вводит ряд новых способов достижения этого эффекта, что сделает вышеуказанные методы устаревшими. Помимо встроенной поддержки закругленных углов (которая уже доступна в браузерах семейства Mozilla), в CSS имеется мощный псевдоэлемент :: outside , который позволяет вставлять дополнительные стилизуемые элементы аналогично примеру JavaScript, показанному в этой статье. Если этого недостаточно, изображения границ позволят практически любое украшение границ, о котором вы могли бы подумать.

К сожалению, пройдет много лет, прежде чем поддержка CSS 3 станет широко доступной. До тех пор JavaScript более чем способен справиться со слабостью.

Похожие публикации:

1. Как программировать arduino
2. Как работает box shadow css
3. Как разделить фон на два цвета html css
4. Как разместить элемент по центру страницы css

Как закруглить края в css: свойство border-radius — учебник CSS

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

Как закруглить углы: свойство CSS3 border-radius

Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).

Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:

. borderElement

Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:

Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:

.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; >.borderElement1

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:

.borderElement < background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 280px/100px; >

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

• border-top-left-radius — для верхнего левого угла;
• border-top-right-radius — для верхнего правого угла;
• border-bottom-left-radius — для нижнего левого угла;
• border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов

На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px , — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей. В случае, когда задаются два значения через косую черту, например, 30px/20px , закругление углов будет происходить по эллипсу. Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px , а второе — длиной вертикальной полуоси — 20px :

Свойство CSS border-radius поддерживается всеми современными версиями браузеров.

Далее в учебнике: свойство box-shadow — создаем тени для элементов.

border-radius | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.5+	3.0+	1.0+	2.1+	1.0+

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Процентная запись	Да, относительно ширины блока
Применяется	Ко всем элементам, за исключением таблиц с border-collapse: collapse
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#the-border-radius

Версии CSS

Описание

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

Синтаксис

Значения

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

В случае задания двух параметров через слэш, то первый задает радиус по горизонтали, а второй по вертикали (эллиптические уголки). На рис. 1 показана разница между обычным скругленным уголком и эллиптическим уголком.

Рис. 1. Радиус скругления для создания разных типов уголков

        
border-radius: 50px 0 0 50px;
 
border-radius: 40px 10px;
 
border-radius: 13em/3em;
 
border-radius: 13em 0.5em/1em 0.5em;
 
border-radius: 8px;
   

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

Рис. 2. Радиусы скругления в браузере Safari

Браузеры

Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-radius.

Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius.

Закругленные углы и блоки с тенью

Закругленные углы и блоки с тенью

Закругленные углы и блоки с тенью

На создание этой страницы вдохновила работа Арве Берсвендсена (Arve Bersvendsen). У него есть много других интересных демонстраций CSS.

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

Конечно, закругленные границы и тени гораздо легче сделать при помощи CSS3, чем в CSS2. Например, чтобы задать абзацу тонкую красную рамку с закругленными углами, в CSS3 вам достаточно всего двух строк наподобие этих:

А для того, чтобы добавить смазанную тень на половину еm ниже и правее абзаца, достаточно будет всего лишь одной линии:

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

Результат

А вот как это выглядит:

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

Исходный код HTML не содержит ничего лишнего:

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

Навигация по сайту

Закруглённые углы (свойство border-radius) | CSS — Примеры

Генератор border-radius CSS

 .radius < border: 2px solid CornflowerBlue; border-radius: 0 ; > .radius 
содержимое блока с закруглёнными углами

Как сделать закругленные углы CSS

Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.

background box-shadow outline [решение] border-image [решение]

Круглые углы у картинки

border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.

style="border-radius: 100%;">

Закруглить края у видео на YouTube

HTML таблица с закругленными углами

Закруглить таблицу можно, но с border-collapse: separate;

1	2	3
1.1	2.1	3.1
1.2	2.2	3.2

 
 
 
1
 
2
 
3
 
 
 
1.1
 
2.1
 
3.1
 
 
1.2
 
2.2
 
3.2
 
 

border-radius у вложенных элементов

Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы

внешний радиус = внутренний радиус + ширина рамки 47px = 32px + 15px

CSS скругление углов у border-image

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

Округление outline

Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).

Закругление углов в примерах

HTML овал

 
 .radius 
.
 

HTML круг

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

 .radius 
.
 

HTML цилиндр

  
.
 

Закругленные три края, HTML капля

 .radius 
.
 

HTML полукруг

 .radius 
.
 

HTML лист

  
.
 

HTML яйцо

  
.
 

Камушек HTML

  
.
 

Слайды с конференции

Как закруглить углы изображения на CSS без Фотошопа — Технический блокнот

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.

Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.

Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.

Закругление углов у блоков DIV

По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:

border-radius: 10px;

Для наглядности нарисуем два блока с прямыми и скругленными углами:

Блок с прямыми углами

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

Закругление углов у картинок

По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh

Вот изображение без CSS обработки

А теперь с загругленными углами:

border-radius: 10px;

Чтобы стало совсем «красиво» с начала добавим окантовку…

border-radius: 10px; border: 5px #ccc solid;

border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;

Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:

border-radius: 10px; box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;

Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.

Маленькое лирическое отступление

Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.

А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.

Как закруглить углы картинок на WordPress

Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:

Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой. В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю. Вы можете дополнить один из них вышеуказанными параметрами.

Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:

.alignnone

Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:

Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!

Вместо заключения

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

Закругленные углы с помощью радиуса округления границ рамки CSS3

До появления CSS3, чтобы добавить к таким элементам веб-страницы, как формы или кнопки, закругленные углы, нужно было использовать ряд изображений и много дополнительной разметки. К счастью, теперь закругленные углы CSS позволяет создавать очень просто. В том числе это можно сделать с помощью свойства border-radius.

Вы можете использовать это свойство CSS3 для следующих браузеров:

• Chrome 6+;
• Firefox 4+;
• Safari 5 +;
• IE9 +;
• Opera 10.5+;
• Android 2.1+;
• iOS 3.1+.

Мы будем работать с классом «info-box«. Это может быть область вашей веб-страницы с контактной информацией, и вы хотите с помощью CSS закруглить углы.

Напишите HTML-код элемента, для которого вы хотите закруглить углы:

Здесь будет какой-то контент

Далее добавьте в таблицу стилей правило CSS:

.info-box < -webkit-border-radius: 20px; border-radius: 20px; background-color: #000000; 
Мы добавили как вендорную версию свойства, так и обычную. Мы также добавляем цвет фона. Чтобы радиус округления углов рамки отображался должным образом, фон элемента должен отличаться от фона области, в которой размещается элемент. Иначе нужно будет добавить стили, ширину и цвет рамки.
Перед тем, как сделать закругленные углы CSS, нужно отметить, что в приведенном примере все четыре угла рамки будут иметь один и тот же радиус (20 пикселей).
Вы также можете создавать панели с закругленными углами, которые отличаются друг от друга. Это можно сделать, добавив для свойства CSS несколько значений. С помощью сокращений CSS их можно указать в одну строку. Порядок присвоения значений: верхний левый угол, верхний правый, нижний правый, нижний левый:
.info-box < -webkit-border-radius: 20px 60px 40px 30px; border-radius: 20px 60px 40px 30px; background-color: #000000; 
Еще один эффект, который вы можете создать с помощью этого свойства, это круглые изображения. Если у вас есть изображение, которое имеет идеальную квадратную форму, то можно с помощью CSS закруглить углы картинки, и тогда рамка «обрежет» края изображения и создаст идеальный круг.
Допустим, что у вас в HTML-разметке есть квадратное изображение, которое имеет класс «bio-pic«. Вы можете сделать это изображение круглым с помощью следующего CSS-кода:
img.bio-pic < -webkit-border-radius: 50%; border-radius: 50%; 
В этом случае не нужно задавать цвет фона или цвет границы, потому что вы добавляете эти стили к изображению эффект закругленных углов будет работать, так как изображение будет отличаться от цвета фона, на котором оно расположено.
Данная публикация является переводом статьи «Rounded Corners with CSS3 Border Radius» , подготовленная редакцией проекта.
Совет CSS: лучшее скругление углов
От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?
Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.
Четвертые части каждой окружности формируют закругленные углы элемента.
Когда объединяются толстые рамки
При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
border: 6px solid crimson;
Пока нет проблем.
Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.
border: 14px solid crimson;
Рамка становится шире, а углы изображения – квадратными.
Почему так происходит?
Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.
Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Чтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.
border: 14px solid crimson;
При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.
Метод Box-shadow
При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.
Расширенный радиус устанавливает растянутый интервал тени блока. Если установить офсеты и размытие на 0, определенное значение расширения сформирует вокруг элемента четкую рамку.
box-shadow: 0 0 0 14px crimson;
Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.
Применение переменных Sass
Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.
$border-width: 14px; $radius: $border-width*1.9; .mike
border: $border-width solid crimson;
Заключение
Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.
Автор: Guil Hernandez
Источник: //blog.teamtreehouse.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
изображений границы CSS
Изображения границ CSS
С помощью свойства CSS border-image вы можете установить изображение, которое будет использоваться в качестве границы вокруг элемента.
CSS border-image Свойство
Свойство CSS border-image позволяет указать изображение, которое будет использоваться вместо обычной границы вокруг элемента.
Имущество состоит из трех частей:

  
Изображение для использования в качестве границы
  
Где нарезать изображение
  
Определите, должны ли средние части повторяться или растягиваться

Мы будем использовать следующее изображение (названное «border.png «):
Свойство border-image берет изображение и разбивает его на девять частей, как доска для крестиков-ноликов. Затем он помещает углы в углы, а средние части повторяются или растягиваются по вашему усмотрению.
 Примечание: Чтобы border-image работал, элемент также нуждается в бордюр набор свойств!
Здесь средние части изображения повторяются для создания границы:
Изображение как бордюр!
Пример
#borderimg граница: сплошная прозрачная 10 пикселей; 
отступ: 15 пикселей; 
border-image: url (border.png) 30 тур; 
>
Здесь средние части изображения растягиваются для создания границы:
Изображение как бордюр!
Пример
#borderimg граница: сплошная прозрачная 10 пикселей; 
отступ: 15 пикселей; 
изображение границы: url (border.png) 30 стрейч; 
>
 Совет: Свойство border-image на самом деле является сокращенным свойством для border-image-source , border-image-slice , ширина-границы-изображения , граница-изображение-исход и border-image-repeat свойств.
CSS border-image — разные значения фрагментов
Различные значения среза полностью меняют внешний вид границы:
border-image: url (border.png) 50 раунд;
border-image: url (border.png) 20% круглое;
border-image: url (border.png) 30% округление;
Пример
# borderimg1 <
граница: 10 пикселей сплошная прозрачная; 
отступ: 15 пикселей; 
border-image: url (border.png) 50 раунд; 
>
# borderimg2 граница: сплошная прозрачная 10 пикселей; 
отступ: 15 пикселей; 
граница-изображение: url (border.png) 20% округление; 
>
# borderimg3 граница: 10 пикселей сплошная прозрачная; 
отступ: 15 пикселей; 
изображение границы: url (border.png) 30% круглый; 
>
Проверьте себя упражнениями!
Свойства изображения границы CSS
border-radius — CSS: Каскадные таблицы стилей
Свойство CSS border-radius скругляет углы внешней границы элемента.Вы можете установить один радиус для создания круглых углов или два радиуса для создания эллиптических углов.
Радиус применяется ко всему фону , даже если элемент не имеет границы; точное положение отсечения определяется свойством background-clip .
Свойство border-radius не применяется к элементам таблицы, когда border-collapse равно collapse .
 Примечание: Как и любое сокращенное свойство, отдельные вложенные свойства не могут наследоваться, например, в border-radius: 0 0 наследуется наследование , что частично переопределяет существующие определения.Вместо этого должны использоваться отдельные свойства от руки.
Это свойство является сокращением для следующих свойств CSS:
 радиус границы: 10 пикселей; радиус границы: 10 пикселей 5%; радиус границы: 2px 4px 2px; радиус границы: 1px 0 3px 4px; радиус границы: 10 пикселей / 20 пикселей; радиус границы: 10 пикселей 5% / 20 пикселей 30 пикселей; радиус границы: 10px 5px 2em / 20px 25px 30%; радиус границы: 10px 5% / 20px 25em 30px 35em; граница-радиус: наследовать; радиус границы: начальный; граница-радиус: вернуться; граница-радиус: не задано; 
Свойство border-radius указано как:

одно, два, три или четыре или значений.Используется для установки единого радиуса для углов.
, за которым необязательно следует «/» и одно, два, три или четыре значения или . Это используется для установки дополнительного радиуса, чтобы вы могли иметь эллиптические углы.

Значения
Обозначает размер радиуса окружности или большой и малой полуосей эллипса с использованием значений длины. Отрицательные значения недопустимы.
Обозначает размер радиуса круга или большой и малой полуосей эллипса в процентах. Проценты по горизонтальной оси относятся к ширине поля; проценты по вертикальной оси относятся к высоте прямоугольника. Отрицательные значения недопустимы.
 border-radius: 1em / 5em; граница-верх-левый-радиус: 1em 5em; граница-верх-правый-радиус: 1em 5em; граница-нижний-правый-радиус: 1em 5em; граница-нижний-левый-радиус: 1em 5em; 
 радиус границы: 4px 3px 6px / 2px 4px; граница-верх-левый-радиус: 4px 2px; граница-верх-правый-радиус: 3px 4px; граница-нижний-правый-радиус: 6px 2px; граница-нижний-левый-радиус: 3px 4px; 
  
граница: сплошная 10 пикселей; радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей;
окантовка: бороздка 1em красная; радиус границы: 2em;
фон: золото; бордюр: хребет золото; радиус границы: 13em / 3em;
граница: нет; радиус границы: 40 пикселей 10 пикселей; фон: золото;
граница: нет; радиус границы: 50%; фон: бурливуд;
граница: пунктирная; ширина границы: 10 пикселей 4 пикселя; радиус границы: 10 пикселей 40 пикселей;
граница: пунктирная; ширина границы: 2px 4px; радиус границы: 40 пикселей;
 pre < маржа: 20 пикселей; отступ: 20 пикселей; ширина: 80%; высота: 80 пикселей; >pre # example-1 < граница: сплошная 10 пикселей; радиус границы: 10 пикселей 40 пикселей 40 пикселей 10 пикселей; >pre # example-2 < окантовка: бороздка 1em красная; радиус границы: 2em; >pre # example-3 < фон: золото; кайма: хребет золото; радиус границы: 13em / 3em; >pre # example-4 < граница: нет; радиус границы: 40 пикселей 10 пикселей; фон: золото; >pre # example-5 < граница: нет; радиус границы: 50%; фон: бурливуд; >pre # example-6 < граница: пунктирная; ширина границы: 10 пикселей 4 пикселя; радиус границы: 10 пикселей 40 пикселей; >pre # example-7
Живые образцы
Таблицы BCD загружаются только в браузере
Закругленные углы | HTML Собака
 Закругленные углы раньше использовались для сужения сплошных фоновых изображений или, для гибких рамок, множества фоновых изображений, по одному на каждый угол, накладываемых на несколько вложенных элементов div .Ах, некрасиво. Ну, больше нет. Теперь, с помощью простого CSS, вы можете украсить свой дизайн большим количеством кривых, чем Мэрилин Монро.
Радиус границы?
Ага. Радиус границы. Но не бойтесь — вам не обязательно иметь границы. Свойство border-radius можно использовать для добавления угла к каждому углу блока.
 #maryn < фон: #fff; ширина: 100 пикселей; высота: 100 пикселей; радиус границы: 20 пикселей; > 
Вот и все.Закругленные углы, понимаете? Хорошо, если у вас есть разумный браузер (см. Примечание ниже).
Углы вырезаются вокруг соответствующих четвертей круга (или эллипса) с заданным радиусом.
Конечно, если вы, , хотите границу…
 #ok_a_border_then < граница: 5px solid # 8b2; ширина: 100 пикселей; высота: 100 пикселей; радиус границы: 5 пикселей; > 
 Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.
Несколько значений
border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius также можно использовать для нацеливания на определенные углы.
Когда-либо менее ужасно многословный, вы также можете определить все угловые радиусы (какое замечательное слово) индивидуально с помощью списка значений, разделенных пробелами, работая по часовой стрелке от верхнего левого угла, как и другие сокращенные свойства:
 #monroe < фон: #fff; ширина: 100 пикселей; высота: 100 пикселей; border-radius: 6px 12px 18px 24px; > 
Граничный радиус с несколькими значениями.
Используя два значения вместо четырех, вы нацеливаетесь на верхний левый и нижний правый угол первой длины (или в процентах), а верхний правый + нижний левый — на второй. Три ценности? Верхний левый, затем верхний правый + нижний левый, затем нижний правый. Разрушение.
Гах! Просто должны быть проблемы с браузером, не так ли? Будь вы прокляты, браузеры.
Internet Explorer версии 8 и ниже не поддерживает border-radius . Единственный способ справиться с этим — либо довольствоваться дизайном в тех браузерах, у которого нет закругленных углов (большинство людей могут с этим смириться), либо вернуться к старым фоновым изображениям.
Вы также можете наткнуться на похожие проприетарные свойства, такие как -webkit-border-radius и -moz-border-radius , которые предназначены для более старых, мало используемых версий Safari и Firefox соответственно. Наш тщательно сформулированный профессиональный совет? К черту их.
Эллипсы
Круги для вас слишком квадратные? Вы можете указать разные радиусы по горизонтали и вертикали, разделив значения знаком «/».
 #nanoo < фон: #fff; ширина: 100 пикселей; высота: 150 пикселей; радиус границы: 50 пикселей / 100 пикселей; граница-нижний-левый-радиус: 50 пикселей; граница-нижний-правый-радиус: 50 пикселей; > 
CSS Закругленные углы: пошаговое руководство
При разработке веб-страницы вы можете захотеть, чтобы у элемента были закругленные углы. Например, если вы добавляете фотографию владельца компании на веб-страницу, вы можете захотеть, чтобы у изображения были закругленные углы, чтобы сделать его более эстетичным.
Найдите свой учебный лагерь Match

Карьера Карма подойдет вам с лучшими техническими учебными курсами
Получите эксклюзивные стипендии и подготовительные курсы

Вот тут и пригодится свойство CSS border-radius.Вы можете использовать свойство border-radius для добавления закругленных углов к любому элементу в CSS.
В этом руководстве на нескольких примерах обсуждается, как использовать свойство border-radius для добавления закругленных углов к элементу в CSS.
Радиус границы CSS
Границы — это линии, окружающие внешний край веб-элемента.
Найдите свой учебный лагерь Match

Карьера Карма подойдет вам с лучшими техническими учебными курсами
Получите эксклюзивные стипендии и подготовительные курсы

В CSS свойство границы используется для указания того, как граница должна отображаться на веб-странице.Если вам интересно узнать больше о том, как создавать границы в CSS, прочтите наше руководство по границам CSS.
CSS Установить отдельные закругленные углы
Свойство border-radius является сокращением для четырех подсвойств, используемых для установки радиуса границы каждого угла. Эти подсвойства:

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

Эти свойства используются для установки границы вокруг определенного угол веб-элемента.Каждый элемент принимает значение длины в пикселях, em, другое измерение длины или процентное значение (%).
Давайте рассмотрим пример, чтобы проиллюстрировать, как работают эти свойства.
Нам было поручено разработать коробку с закругленными верхними левыми и нижними правыми углами. Наш блок должен иметь сплошную светло-синюю рамку размером 3 пикселя. Верхний левый угол должен быть закруглен на 20 пикселей, а нижний правый угол — на 10 пикселей. Мы могли бы использовать следующий код для создания этого ящика:
.html 
 
Это коробка.
 
 
styles.css .коробка
Наш код возвращает:
В нашем HTML-коде мы создали поле с помощью тега
. Это поле содержит тег
, в котором текст Это поле . хранится. Нашему тегу
назначен класс box , что означает, что стили CSS, которые мы применяем к классу box , будут применены к тегу
В нашем файле CSS мы определили, что любой элемент с классом box должен иметь:

Сплошная голубая рамка шириной 3 пикселя.
Верхний левый угол, округленный на 20 пикселей.
Нижний правый угол, округленный на 10 пикселей.

Если вы посмотрите на изображение выше, вы увидите, что наши верхний левый и нижний правый углы скруглены. Левый верхний угол был закруглен на 20 пикселей, а правый нижний угол — на 10 пикселей.
Сокращение радиуса границы CSS
Свойство border-radius является сокращением для четырех подсвойств, которые мы обсуждали ранее.
Используя свойство border-radius, мы можем определить закругленные углы для веб-элемента, используя одну строку кода, вместо того, чтобы определять каждый угол по отдельности с использованием отдельного свойства.
Синтаксис свойства border-radius зависит от того, сколько значений вы укажете. Давайте рассмотрим пример каждого из возможных способов использования свойства border-radius для добавления закругленных углов к элементу.
Одно значение
Если вы хотите применить одинаковый радиус границы к каждому углу элемента, вам нужно указать только одно значение при использовании свойства border-radius.
Предположим, вы хотите создать рамку с радиусом границы 20 пикселей по всем углам. Вы можете сделать это с помощью этого кода:
Наш код возвращает:
В этом примере мы создали поле высотой 200 пикселей и шириной 200 пикселей.Наш блок имеет сплошную светло-синюю рамку размером 3 пикселя. Мы также использовали свойство border-radius, чтобы добавить эффект округления на 20 пикселей к каждому углу в нашем блоке.
Два значения
Если вы создаете прямоугольник, который должен иметь одинаковое скругление для верхнего левого и нижнего правого углов и другой набор скруглений для верхнего правого и нижнего левого углов, вы можете указать два значения с помощью свойства border-radius.
Порядок, в котором применяются указанные вами значения округления:

Первое значение — это величина, на которую вы хотите, чтобы верхний левый и нижний правый углы были скруглены.
Второе значение — это величина, на которую вы хотите, чтобы верхний правый и нижний левый углы были округлены.

Предположим, вы хотите, чтобы верхний левый и нижний правый углы прямоугольника были закруглены на 20 пикселей, а нижний левый и верхний правый углы — на 10 пикселей. Вы можете создать этот ящик, используя следующий код:
Наш код возвращает:
В нашем примере мы указали два значения с помощью свойства border-radius.Первое значение используется для установки закругления края верхнего левого и нижнего правого углов на 20 пикселей. Второе значение используется для установки закругления углов для левого нижнего и правого верхнего углов на 10 пикселей.
Три значения
Если вы хотите назначить прямоугольник с закругленными углами, где верхний левый угол имеет собственное закругление, верхний правый и нижний левый углы имеют собственное закругление, а нижний правый угол имеет собственное закругление, вы можете указать три значения с рамкой -радиус свойство.
Порядок, в котором указанные вами три значения применяются к блоку, следующий:

Первое значение — это округление левого верхнего угла.
Второе значение — это округление для верхнего правого и нижнего левого углов.
Третье значение — это округление правого нижнего угла.

Предположим, мы создаем прямоугольник, который должен иметь следующие округления:

Верхний левый угол должен быть скруглен на 30 пикселей.
Верхний правый и нижний левый углы должны быть скруглены на 20 пикселей.
Нижний правый угол должен быть скруглен на 10 пикселей.

В приведенном ниже примере мы создаем прямоугольник, который использует эти скругления углов. Мы также применяем светло-синюю рамку вокруг нашего блока и устанавливаем его размер 200 пикселей в ширину и 200 пикселей в длину. Вот код, который мы могли бы использовать для создания нашего бокса:
Наш код возвращает:
Верхний правый и нижний левый углы имеют одинаковое закругление.Верхний левый угол имеет собственное закругление, а нижний правый угол также имеет собственное закругление.
Четыре значения
Допустим, вы создаете прямоугольник, углы которого должны быть скруглены с использованием четырех разных значений. Вы можете скруглить углы рамки, указав четыре значения с помощью свойства border-radius. Указанные вами значения будут интерпретироваться в следующем порядке:

Первое значение применяется к верхнему левому углу.
Второе значение относится к правому верхнему углу.
Третье значение применяется к нижнему правому углу.
Четвертое значение применяется к нижнему левому углу.

Предположим, мы хотим создать прямоугольник с закруглением на 5 пикселей в верхнем левом углу, закруглением на 10 пикселей в правом верхнем углу, закруглением на 15 пикселей в правом нижнем углу и закруглением на 20 пикселей в нижнем левом углу. Наше поле должно быть 200 пикселей в ширину на 200 пикселей в длину и иметь сплошную голубую границу шириной 3 пикселя.
Мы могли бы создать этот ящик, используя следующий код:
.коробка
Наш код возвращает:
На изображении выше вы можете видеть, что каждый угол имеет собственное значение округления, основанное на значениях, которые мы указали в нашем коде.
Эллиптические углы
В наших примерах выше мы использовали радиус границы для создания закругленных углов. Мы также можем использовать свойство border-radius для создания эллиптических границ.
Мы можем создать эллиптические углы, добавив косую черту между двумя значениями углов элемента.Вот синтаксис для создания эллиптического угла:
border-radius: горизонтальный радиус / вертикальный радиус;
Предположим, мы хотим создать 25% -ный эллиптический угол вокруг горизонтальных углов коробки и 50% -ный эллиптический угол вокруг вертикальных углов коробки. Наше поле должно быть 200 пикселей в ширину и 200 пикселей в длину и иметь светло-синюю рамку. Мы могли бы сделать это с помощью этого кода:
Наш код возвращает:
Как видите, мы создали форму с эллиптическими закругленными углами.
Заключение
Свойство border-radius используется для добавления закругленных углов к элементу в CSS. Свойство border-radius является сокращением для четырех подсвойств, используемых для добавления закругленных углов к каждому углу веб-элемента.
В этом руководстве, сопровождаемом несколькими примерами, обсуждается, как использовать свойство border-radius и его четыре подсвойства для создания закругленных углов в CSS. Теперь вы готовы начать использовать свойство border-radius для создания закругленных углов, как эксперт.
Как создавать блоки с закругленными углами в CSS
До поддержки браузером CSS3 создание блоков с закругленными углами требовало творческого использования фоновые изображения, границы и расположение. К счастью, эти дни прошли. Сегодня браузеры поддерживают CSS3 и его свойства border-radius . Свойства border-radius делают Закруглить углы на коробке несложно.

   Начните с HTML-страницы, содержащей два поля. 


Закругленные угловые рамки
Закругленные углы css – Как сделать внутренние закругленные углы с неоднотонным фоном на CSS? — Хабр Q&A

Закруглённые углы (свойство border-radius) | CSS — Примеры
Генератор border-radius CSS
 .radius < border: 2px solid CornflowerBlue; border-radius: 0 ; > .radius 
содержимое блока с закруглёнными углами
Как сделать закругленные углы CSS
Использование свойства CSS border-radius (w3.org) позволяет закруглить углы элемента HTML даже без применения свойства border. Оно действует и на background, и на box-shadow. Но не на outline и border-image.
background box-shadow outline [решение] border-image [решение]
Круглые углы у картинки
border-radius легко справится и с этой задачей, достаточно его добавить к HTML коду изображения.
 style="border-radius: 100%;">
Закруглить края у видео на YouTube

HTML таблица с закругленными углами
Закруглить таблицу можно, но с border-collapse: separate;


1
2
3



1.1
2.1
3.1


1.2
2.2
3.2


 
 
 
1
 
2
 
3
 
 
 
1.1
 
2.1
 
3.1
 
 
1.2
 
2.2
 
3.2
 
 
border-radius у вложенных элементов
Я как и Rakesh пришла к выводу: дабы ширина рамки в сторонах и углах имела одинаковый размер, нужно чтобы
внешний радиус = внутренний радиус + ширина рамки 47px = 32px + 15px
CSS скругление углов у border-image
Чтобы сделать скругленные углы у border-image можно применить родительский блок. Вернее два родительских блока, один из которых округляет внешние края рамки, а другой — внутренние.
Округление outline
Firefox поддерживает -moz-outline-radius. Но пока его нет в w3.org, outline почти полноценно заменяется box-shadow (см. образец).
Закругление углов в примерах
HTML овал
 
 .radius 
.
 
 
HTML круг
Тоже самое, только чтобы сделать круг, нужно скруглить углы квадрата, а не прямоугольника.
 .radius 
.
 
HTML цилиндр
  
.
 
Закругленные три края, HTML капля
 .radius 
.
 
HTML полукруг
 .radius 
.
 
HTML лист
  
.
 
HTML яйцо
  
.
 
Камушек HTML
  
.
 
Слайды с конференции
Скругление углов в CSS
Установка скругления
Cуществует возможность установить скругление углов рамки блока. При этом, фон заполняет только область внутри рамки. Если рамки нет, то скругляется только фон.
В CSS cкругление углов устанавливает свойство border-radius. Значением этого свойства является радиус скругления, указанный в единицах, доступных в CSS.
Создадим блок и зададим рамку со скруглёнными углами. Также зададим внутренние отступы для увеличения размеров блока:
#div1
Блок со скруглёнными углами
Скругление отдельных углов
Можно скруглить любой угол отдельно. Для этого есть свойства:
border-top-left-radius — скругление верхнего левого угла
border-top-right-radius — скругление верхнего правого угла
border-bottom-left-radius — скругление нижнего левого угла
border-bottom-right-radius — скругление нижнего правого угла
Для примера создадим ещё один блок и сделаем скругление правого верхнего угла с радиусом 8 пикселей, а правого нижнего угла с радиусом 20 пикселей. Чтобы между блоками было расстояние, установим и внешние отступы:
#rightrad
Блок с отдельными скруглёнными углами
Краткая запись
Можно указать радиусы скругления для углов более коротким способом. Для этого свойству border-radius указывается не одно значение, а четыре, через пробел. Сначала идёт верхний левый угол, затем верхний правый, затем нижний правый, затем нижний левый.
Создадим блок и укажем ему радиусы скругления для каждого угла:
#allradius
Скругление всех углов по отдельности
Скругление в виде эллипса
Скругление угла может быть не только в виде части окружности, но и в виде части эллипса. При этом блок может выглядеть так:
Для этого свойству border-radius сначала указывается горизонтальный радиус, затем через слеш вертикальный радиус. Такой блок создаётся так:
У свойств, устанавливающих скругление отдельных углов, такое скругление указывается по-другому. Горизонтальный и вертикальный радиус перечисляются через пробел. Пример:
Скругление в виде эллипса
Скругление в процентах
В CSS cкругление углов может указываться в процентах. При этом на скругление выделяется такой процент длинны сторон, образующих угол, который указан для этого угла. Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10 процентов нижней части рамки и 10 процентов левой части рамки. Если указать 50%, то на скругление уйдёт по половине длинны сторон рамки. А если указать 100%, то на скругление уйдйт вся нижняя сторона и вся левая сторона рамки. Скругление в процентах можно указывать как для всех углов, так и для каждого угла отдельно.
Скругление в процентах
Указание скругления в процентах позволяет создавать блоки с различными интересными формами без расчёта размеров. Например такие:
Такой блок создаётся очень просто. Для его создания нужно:

Создать квадрантый блок. Длинну и ширину нужно указывать не пикселях, а в абсолютных единицах, например в сантиметрах, чтобы длинна и ширина были одинаковыми.
Задать фон блока.
Установить скругление всех углов 50 процентов.

Скругление углов CSS | Impuls-Web.ru
Приветствую вас, дорогие читатели!
Довольно часто, при верстке страниц, в зависимости от дизайна, появляется необходимость в скруглении углов блоков и изображений для придания странице более аккуратного вида. В сегодняшней статье я покажу вам, как это можно сделать с помощью CSS-свойств.
Навигация по статье:

Простое скругление углов CSS
Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:
В данном случае для блока задается параметр для всех сторон.
Варианты скругления углов CSS
Так же, можно задавать радиус для каждого отдельного угла. Например:
border-radius: 5px 15px 25px 35px;
Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.
Если вам нужно, к примеру, симметрично скруглить два противоположных угла по диагонали, то можно задать только два параметра:
border-radius: 5px 35px;
В данном случае первый параметр работает для верхнего левого и правого нижнего, а второй – для верхнего правого, и нижнего левого.
Необычное скругление углов CSS
Еще у свойства border-radius есть одна интересная особенность. Вы можете задавать радиус скругления не только для какого-то конкретного угла, но и для вертикальной и горизонтальной половины угла.
Для этого нам нужно задать два параметра скругления через слеш. Например:
Используя данный вариант можно даже элипс:
Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

Если эта статья вам понравилась, и вы хотите меня поддержать, обязательно поделитесь ссылкой в социальных сетях и оставьте комментарий.
А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!
 С уважением Юлия Гусарь
Скругленные углы css. Как закруглить углы в CSS и HTML
). Это делается с помощью свойства CSS border-radius . В этой статье мы рассмотрим все различные варианты.
Синтаксис CSS border-radius : 
border-radius : [значение_скругления ];
Как скруглить углы в HTML через CSS
Рассмотрим примеры скругления углов через CSS. Например
В этом случае все 4 края элемента будут скруглены по 30px.
Значение скругления означает то, какой радиус окружности должен быть в уголке.
Можно скруглять каждый угол с разными радиусами. Для этого нужно написать
border-radius : 10px 7px 0px 0px ;
Последовательность этих цифр следующая:

Верхний левый угол (в примере это 10px)
Верхний правый угол (в примере это 7px)
Нижний правый угол (в примере это 0px)
Нижний левый угол (в примере это 0px)

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол
border-top-left-radius : 10px ; // верхний левый угол border-top-right-radius : 7px ; // верхний правый угол border-bottom-right-radius : 0px ; // нижний правый угол border-bottom-left-radius : 0px ; // нижний левый угол
Помимо этого, можно также изменять и радиус для каждого угла в отдельности для горизонтальной и вертикальной плоскостей.

Задание второго радиуса нужно задавать через слэш «/» в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса
border-radius : 5px 5px 5px 5px / 10px 10px 10px 10px ; или можно задать так: border-top-left-radius :5px 10px ; // верхний левый угол border-top-right-radius :5px 10px ; // верхний правый угол border-bottom-right-radius :5px 10px ; // нижний правый угол border-bottom-left-radius :5px 10px ; // нижний левый угол
Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.
Например, с помощью этих свойств можно сделать эллипс:
Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:
border-radius : 100px / 200px ;
Изменяя параметры каждого из углов, можно сделать различные интересные скругленные элементы. Например, можно сделать круг, эллипс, каплю, камень, яйцо и т.п.
Задание толщины, цвета и типа линии при скруглении
Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border :
border : [толщина ] [тип_линии ] [цвет ];
border : 1px solid #00ff00 ;

Толщина — задается чаще всего в пикселях
Тип линии может принимать значения:

solid (сплошной)
dashed (пунктирный)
dotted (ряд точек)
groove (линия бороздка)
inset (вдавленная линия)
outset (выдавленная линия)

Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.
Свечение для скругления
Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow
box-shadow : 0px 0px 4px 2px #a0b ;
Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр — цвет (#a0b).
Мы приводили всегда в качестве примеров тег
. Но таким же образом можно скруглять и table, img, iframe . Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .
Браузеры 
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS :
-webkit-border-radius :5px ; -moz-border-radius :5px ; border-radius :5px ;
Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.
В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.


Код
Описание
Вид


div 

Радиус скругления для всех уголков сразу.


div 

Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.



div 

Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.



div 

Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.



В примере 1 показано создание блока со скруглёнными уголками.
Пример 1. Уголки у блока
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Меня — супплетивная форма винительного падежа от я.
Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками
Интересный эффект можно получить, если задать радиус скругления больше половины высоты и ширины элемента. В таком случае получится круг. В примере 2 показано создание круглой кнопки с рисунком.
Пример 2. Круглая кнопка
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 2.
Рис. 2. Круглая кнопка
В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .
Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.
Пример 3. Свечение
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Результат данного примера показан на рис. 3.

Рис. 3. Свечение вокруг кружка
С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.
Пример 4. Эллипсы
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Эллиптические уголки Вы сами себе учитель
Результат данного примера показан на рис. 4.

Рис. 4. Использование эллиптических уголков
Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.
Пример 5. Изображен
Закругление углов CSS
Одинаковый радиус для всех углов
Для того чтобы установить одинаковый радиус для всех углов блока нужно указать одно значение:
Чтобы радиус отображался в других браузерах, запись производится с дополнительными префиксами:
 -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; 
Префикс -moz записывается для отображения в браузере Firefox , 
а –webkit , для Safari и Google Chrome .
 HTML 
 
 
 CSS .box
Одинаковые радиусы по диагонали
Свойство border-radius с двумя значениями отображает одинаковые радиусы по диагонали. Первое значение задаёт верхний левый и нижний правый радиус, а второе верхний правый и нижний левый.
 -webkit-border-radius: 40px 20px; -moz-border-radius: 40px 20px; border-radius: 40px 20px; 
1. Верхний левый и нижний правый – 40px
2. Верхний правый и нижний левый – 20px
 HTML 
 
 
 CSS .box
Два равных радиуса по диагонали и два по отдельности
У свойства border-radius с тремя значениями первый параметр отображает радиус верхнего левого угла, второй верхнего правого и нижнего левого, а третий нижнего правого.
 -webkit-border-radius: 10px 40px 20px; -moz-border-radius: 10px 40px 20px; border-radius: 10px 40px 20px; 
1. Верхний левый – 10px
2. Верхний правый и нижний левый – 40px
3. Нижний-правый – 20px
Каждый радиус задаётся в отдельности
Свойство border-radius с четырьмя значениями указывает на то, что каждое закругление угла задаётся по отдельности. Первое значение задаёт верхний левый радиус, второй верхний правый, третий нижний правый, четвёртый нижний левый.
 -webkit-border-radius: 0px 10px 20px 40px; -moz-border-radius: 0px 10px 20px 40px; border-radius: 0px 10px 20px 40px; 
1. Верхний левый – 0px
2. Верхний правый – 10px
3. Нижний правый – 20px
4. Нижний левый – 40px
Закругления блока с левой стороны
 -webkit-border-radius: 20px 0px 0px 20px; -moz-border-radius: 20px 0px 0px 20px; border-radius: 20px 0px 0px 20px; 
Закругления блока с правой стороны
 -webkit-border-radius: 20px 20px 0px 0px; -moz-border-radius: 20px 20px 0px 0px; border-radius: 20px 20px 0px 0px; 
Закругления сверху
 -webkit-border-radius: 0px 20px 20px 0px; -moz-border-radius: 0px 20px 20px 0px; border-radius: 0px 20px 20px 0px; 
Закругления снизу
 -webkit-border-radius: 0px 0px 20px 20px; -moz-border-radius: 0px 0px 20px 20px; border-radius: 0px 0px 20px 20px; 
Круг из квадратного блока
Для того чтобы получился круг из квадратного блока ( это относится и к изображению ) нужно чтобы высота и ширина были одинаковы а значение свойства border-radius должно быть пятьдесят процентов.
 HTML 
 
 
 CSS .circle
Блок с закруглениями
Для того чтобы получить эллипс из квадратного элемента или картинки высота и ширина должны быть разными, а значение свойства border-radius должно составлять пятьдесят процентов.
 HTML 
 
 
 CSS .rounding
Закругленные углы CSS
Приветствую, Друзья. Данная статья посвящена довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS. Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.

В данном способе есть, как плюсы, так и минусы. Плюсы, конечно же, заключаются в том, что нет необходимости создавать изображения, используя какой-либо графический редактор, загружать их на сервер, а потом расставлять с помощью CSS на необходимые места для создания нужного эффекта. При этом необходимо создавать дополнительные элементы в HTML-коде, а также прописывать отдельные свойства для каждого из них.
Что касается минусов, то здесь можно отметить одну проблему — это поддержка данного свойства не всеми веб-браузерами, особенно это касается устаревших версий различных браузеров.
Однако закругление углов с помощью CSS становится все популярнее и популярнее. Как Вы уже могли понять, в данной статье мы будем использовать свойство доступное в CSS 3.
Скругленные углы с помощью CSS.
Итак, для примера мы возьмем блочный элемент DIV и сделаем его углы скругленными. Для примера создадим блок, и прямо в HTML-коде будем назначать ему свойства, используя атрибут style. Сначала мы имеем блочный элемент залитый фоном любого цвета:
Кстати, если Вам необходимо узнать какой код цвета у Вас на сайте или на любом другом, Вам пригодится данная статья.
А вот так мы увидим его в веб-браузере:
Теперь, чтобы закруглить углы воспользуемся свойством «border-radius», которое можно перевести, как радиус границы. Да именно так, а не как многие могли подумать, что это радиус рамки или как там его еще называют (border). Данное свойство отвечает именно за радиус границ элемента, а не за его рамки или бордюры, которых может и не быть. Однако, свойство будет по-прежнему работать и без использования border у элемента. Надеюсь, вы поняли, что я хотел сказать. Значением для данного свойства являются любые числовые значения, которые применимы в CSS, такие как проценты, пикселы (px), пункты (pt) и так далее. Да, и следует учитывать, что данное свойство работает сразу на все четыре угла элемента, кроме того, можно указать разный радиус для каждого угла, но об этом чуть позже. Для начала зададим радиус углов нашего прямоугольника. Пусть он будет равен 5 пикселам:
Тогда элемент станет выглядеть так:
Теперь, предлагаю разобраться в том, как добавить свой радиус для каждого угла в отдельности. Для этого мы можем воспользоваться свойством, которое можно применить для каждого угла в отдельности. Если говорить о прошлом примере, то в полном виде свойства для элемента выглядели бы так:
border-top-left-radius:5px; /* верхний левый угол */ border-top-right-radius:5px; /* верхний правый угол */ border-bottom-right-radius:5px; /* нижний правый угол */ border-bottom-left-radius:5px; /* нижний левый угол */
То есть, если мы хотим задать каждому углу свое значение, мы имеем такую возможность, и чтобы убедиться в этом возьмем следующий код:
И тогда мы получим такой результат:
Как мы можем видеть, для границы каждого угла задано свое значение радиуса.
Кроме того CSS позволяет нам задать значение для границы каждого угла в виде короткой записи, которая будет выглядеть так:
Где значения будут следовать в таком порядке:
border-radius: 5px /* верхний левый угол */ 10px /* верхний правый угол */ 15px /* нижний правый угол */ 20px /* нижний левый угол */;
Соответственно, исходя из выше сказанного, становится понятно, что таким же образом мы можем задать границу радиуса только для трех (одного или двух) углов:
Так это выглядит в веб-браузере:
Если Вы еще не совсем запутались, то продолжим. Дело в том, что радиус для каждой границы угла может быть указан не в одном значении, как мы рассматривали выше, а в двух. То есть два значения для каждого угла. В таком случае первое значение установит радиус для угла по горизонтали, а второе по вертикали. Давайте начнем сначала с одного угла:
В данном примере мы воздействовали только на левый верхний угол элемента:
Если расставить значения наоборот, тогда элемент станет выглядеть так:
На этом вроде бы можно было бы, и закончить, но нет. Есть еще одна хитрость. В значении свойства мы можем использовать слеш (/) между значениями. Слеш может помочь нам совместить значения с другими значениями. В общем проще показать, чем рассказать. Начнем с простого. Предположим, что нам необходимо, чтобы по горизонтали радиус был равен 35 пикселам, а по вертикали 5. При этом, чтобы данные значения относились ко всем углам. Тогда мы можем написать так:
И получить вот такой результат:
Теперь рассмотрим пример посложнее:
В данном случае значение до знака слеша (/) будет иметь отношение к горизонтальному радиусу угла, а после знака к вертикальному. При этом значения будут относиться друг к другу таким образом:
border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;
А результат будет таким:
И в завершении статьи поговорим о поддержке различными браузерами данного свойства.
Закругление углов в различных веб-браузерах.
Здесь стоит отметить, что данное свойство поддерживается не всеми версиями браузеров. Свойство поддерживается в IE9 +, Firefox 4 +, Chrome, Safari 5 +, и Опера.
Но для некоторых браузеров версии, которых не поддерживают данное свойство, существуют нестандартные свойства, которые добавляют, так называемый префикс или приставку к свойству.
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.
При этом нам придется продублировать свойство, используя данные префиксы. Например, если у нас задано свойство для границы левого верхнего угла значение, которого равно пяти пикселам:
border-top-left-radius: 5px;
Тогда свойство с дублированием его с помощью префиксов будет выглядеть так:
-webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;
Очень надеюсь, что смог понятно все объяснить и Вам теперь понятно, как сделать закругленные углы, используя только CSS.
Удачи, Вам!
Закруглённые углы через CSS
Вы здесь: Главная — CSS — CSS Основы — Закруглённые углы через CSS
 
Наверняка, Вы часто встречали блоки с закруглёнными углами. За примером далеко ходить не надо, достаточно посмотреть вправо и приглядеться к моим блокам, у которых как раз углы и закруглены. Стоит отметить, что способов создания этого очень много. У каждого из них есть свои преимущества и недостатки, и я рассмотрю один из них, которым обычно и пользуюсь.
Для начала потребуются 4 изображения, каждое из которых отвечает за свой угол блока. Далее напишите такой HTML-код:
И такой CSS-код:
.roundborder border: 2px solid #ffd460; 
> 
.roundborder div background: url(../images/t-l.png) top left no-repeat; 
margin: -2px; 
position: relative; 
> 
.roundborder div div background: url(../images/t-r.png) top right no-repeat; 
margin: 0; 
> 
.roundborder div div div background: url(../images/b-r.png) bottom right no-repeat; 
> 
.roundborder div div div div background: url(../images/b-l.png) bottom left no-repeat; 
padding: 20px; 
>
По названию картинок, думаю, что их назначение понятно, однако, на всякий случай поясню:

t-l — верхний левый угол
t-r — верхний правый угол
b-l — нижний левый угол
b-r — нижний правый угол

Свойство padding Вы можете задавать своё, так как оно всего лишь делает отступ контента от закруглённой рамки. Также обратите внимание, свойство border должно быть толщиной с рамкой в картинке, а свойство margin: -2px, возможно, так же придётся поменять, поскольку это значение должно равняться ширине картинки, взятой со знаком минус.
Вот таким несложным способом делаются закруглённые углы через CSS. Большим преимуществом данного способа является то, что он является кроссбраузерным. А в качестве минуса я бы отметил большое количество div.

Создано 12.10.2011 09:53:52
Михаил Русаков

 Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


Кнопка: 
 Она выглядит вот так:
Текстовая ссылка:
Как создать свой сайт Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи): 
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Как скруглить углы в css


Получаем прямоугольник с закругленными углами и текстом:

Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:
Как скруглить углы в html через css

Закругление углов CSS: свойство border-radius — учебник CSS

В предыдущем уроке мы изучили, как задать границу для элемента. Также были рассмотрены такие свойства как border-color и border-style, с помощью которых можно настраивать цвет и стиль границы. Однако все рамки у нас получались с прямыми углами. Теперь мы расскажем, каким образом можно сделать закругленные углы в CSS для границ.
Как закруглить углы: свойство CSS3 border-radius
Закругление углов в CSS можно сделать для любого элемента HTML-страницы. Для этого необходимо применить к нему свойство border-radius с соответствующим значением. Чаще всего значение указывается в пикселях, но можно также использовать и другие единицы, например, em или проценты (в последнем случае вычисление производится относительно ширины блока).
Эффект данного свойства будет заметен только при условии, что у стилизуемого элемента имеется цветной фон и/или граница. Например:
Стиль, описанный выше, даст следующий результат на элементе размером 200×200 пикселей:
Вы также можете сделать закругленные края только для верхних или нижних углов элемента либо задать каждому углу разный радиус скругления — большое поле для фантазии! Пример:
Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 150×450 пикселей:
Значения можно смешивать (т. е. использовать в одном стиле и обычное, и эллиптическое закругление), а также добавлять персональный стиль для каждого угла, используя соответствующие свойства:

border-top-left-radius — для верхнего левого угла;
border-top-right-radius — для верхнего правого угла;
border-bottom-left-radius — для нижнего левого угла;
border-bottom-right-radius — для нижнего правого угла.

Принцип скругления углов
На рисунке ниже показано, каким образом вычисляется скругление углов в CSS. Так, если для угла указано одно значение, — например, 20px, — это означает, что закругление будет происходить по окружности с радиусом 20 пикселей.
В случае, когда задаются два значения через косую черту, например, 30px/20px, закругление углов будет происходить по эллипсу.
Первое значение в таком случае является длиной горизонтальной полуоси эллипса — 30px, а второе — длиной вертикальной полуоси — 20px:
Свойство CSS border-radius поддерживается всеми современными версиями браузеров.
Далее в учебнике: свойство box-shadow — создаем тени для элементов.
Как закруглить углы изображения на CSS без Фотошопа

Все современные браузеры поддерживают стандарты гипертекстовой разметки HTML5 и стили оформления CCS3. И если ваш сайт (шаблон) поддерживает современные стандарты, то вы можете вносить изменения в оформление, такое как скругление углов, тени, градиентная заливка, не прибегая к помощи графических редакторов.
Вебмастера повсеместно используют скругленные углы у блоков и рамок на сайтах. Я в этой статье расскажу как же закруглить углы у картинок и фотографий на сайте без использования сторонних программ, только с помощью CSS.
Чтобы приведенные примеры в статье корректно отображались у вас на экране, вы должны использовать самые свежие версии браузеров, FireFox, Chrome и те что сделаны на основе их: Яндекс.Браузер, Амиго и так далее.
Закругление углов у блоков DIV
По стандарту CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, например так:
Для наглядности нарисуем два блока с прямыми и скругленными углами:
Блок с прямыми углами
Блок с закругленными углами
По аналогии с примером выше можно закруглить углы и у картинок на сайте, например фотографий. Для наглядности закруглим углы для фотографии со страницы https://moonback.ru/page/shinomontazh
Вот изображение без CSS обработки
А теперь с загругленными углами:
Чтобы стало совсем «красиво» с начала добавим окантовку…
border-radius: 10px; border: 5px #ccc solid;
border-radius: 10px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;
Вариант ниже (закругленные углы с тенью без бордюра) очень похож на коврик для мыши:
border-radius: 10px; box-shadow: 0 0 10px #444;

И напоследок полное издевательство над изображением

border-radius: 50%; border: 5px #cfc solid; box-shadow: 0 0 10px #444;
Если вы откроете изображении в новом окне, то увидите, что оно (изображение) в неизменном виде, а все углы, тени и так далее — всего лишь результат обработки CSS стилей вашим браузером.
Маленькое лирическое отступление
Стиль border увеличивает размер изображения на величину окантовки. Если указано значение border: 5px, то итоговое изображение станет шире и выше на 10 пикселей. Учитывайте это, в некоторых случаях может «поехать» верстка сайта.
А стиль box-shadow не влияет на размер картинки, тень как бы наезжает на соседние элементы. При его использовании верстка сайта не страдает.
Как закруглить углы картинок на WordPress
Во всех приведенных примерах выше я прописывал стили прямо в тегах html кода. Например последний выглядит так:
Это хорошо когда нужно переоформить одну картинку или фотографию. А если вы захотите изменить все? Ну не будете же вы лазить по всему своему сайту, чтобы подредактировать отображение каждой.
В большинстве случаев WordPress тегу IMG определяет несколько классов стилей. Один по уникальному имени файла с изображением, другой по размеру, и еще по выравниваю.
Вы можете дополнить один из них вышеуказанными параметрами.
Например для всех изображений, для который не указано выравнивание, в файле style.css вашей темы WordPress пропишите следующее:
Либо самый жесткий метод для всех картиной на сайте. Переопределим стиль для всех тегов IMG:
Последний вариант подойдет не только для WordPress, а для любой CMS. И даже для простой HTML странички в том случае когда при выводе изображений тегу IMG не присваеватся никаких классов стилей. Но будьте внимательны. Если вы переопределите параметры отображения тега IMG вы измените внешний вид ВСЕХ картинок на сайте!
Вместо заключения
Все примеры в статье условные и призваны лишь продемонстрировать некоторые возможности CSS по обработки изображений и показать как это просто.
Поделись этой страницей с друзьями!
Создаем геометрические фигуры с помощью CSS

На мой взгляд, одним из интересных нововведений в CSS3, является возможность использования меньшего количества изображений в веб-дизайне и создание различных фигур.
Все те фигуры, которые вы рисовали ранее в графических редакторах теперь можно сделать с помощью CSS3. Новые CSS свойства transform и border-radius позволяют делать это, не прибегая к помощи сторонних программ.
В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3.
Что вам понадобится для использования данного руководства

Знание CSS3;
Время и внимание.

Скачать исходные файлы 
Просмотреть демонстрацию
Окружность
HTML 
Для создания окружности с помощью CSS, во-первых, мы будем использовать тег div. Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle:
CSS 
Что касается CSS, просто задаем значения width и height, а затем задаем значение border radius, равное половине от width и height:
Квадрат
HTML 
Чтобы создать квадрат в CSS, как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div:
CSS 
Для создания квадрата в CSS, просто задаем значения width и height равные друг другу:
Прямоугольник
HTML 
Чтобы создать прямоугольную форму, в CSS, как и в случае с квадратом, настраиваем div, где ID равно rectangle:
CSS 
Так же, как и в случае с квадратом, мы зададим значения width и height, но на этот раз width будет больше, чем height:
HTML 
Для создания овала в CSS, создаем div с ID равным oval:
CSS 
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height:
Треугольник
HTML 
И снова, для создания треугольника с помощью CSS, делаем div с ID равным triangle.
CSS 
Для создания треугольника мы будем манипулировать свойством border. Изменяя ширину границы, вы получите различные углы поворота:
Треугольник, направленный вниз
HTML 
Создаем перевернутый треугольник с помощью CSS. Снова создаем div. ID равно triangle_down:
CSS 
Создавая перевернутый треугольник, оперируем толщиной границы:
Треугольник, направленный влево
HTML 
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left:
CSS 
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:
Треугольник, направленный вправо
HTML 
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right:
CSS 
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:
HTML 
Для создания фигуры «ромб», создаем div с ID diamond:
CSS 
Ромб можно создать несколькими способами. Используя свойство transform совместно со значениями свойства rotate, мы можем отобразить два треугольника, расположенных рядом друг с другом:
Трапеция
HTML 
Для создания фигуры «трапеция», создаем div с ID равным trapezium.
CSS 
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:
Параллелограмм
HTML 
Для создания фигуры «параллелограмм», создаем div с ID равным parallelogram:
CSS 
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:
Звезда
HTML 
Для создания фигуры «звезда», создаем div с ID равным star:
CSS 
Создание фигуры «звезда» — последовательность странных манипуляций с границами с использованием свойства transform равным rotate. Смотрите код ниже:
Звезда (6ти конечная)
HTML 
Для создания фигуры «шестиконечная звезда», создаем div с ID равным parallelogram:
CSS 
Шестиконечная звезда создается с помощью свойства border. Создаем два набора фигур и комбинируем в одну:
Пятиугольник
HTML 
Для создания фигуры «пятиугольник», создаем div с ID равным pentagon:
CSS 
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:
Шестиугольник
HTML 
Для создания фигуры «шестиугольник», создаем div с ID равным hexagon:
CSS 
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:
Восьмиугольник
HTML 
Для создания фигуры «восьмиугольник», создаем div с ID octagon:
CSS 
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:
Сердце
HTML 
Для создания фигуры «сердце», создаем div с ID heart:
CSS 
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:
HTML 
Для создания фигуры «яйцо», создаем div с ID egg:
CSS 
Концепция фигуры «яйцо» похожа на концепцию фигуры «овал», за исключением свойства height, которое больше, чем width. И особое внимание в этой фигуре придается свойству radius. С помощью подбора его значений можно добиться нужного результата:
Бесконечность
HTML 
Для создания фигуры «бесконечность», создаем div с ID infinity:
CSS 
Фигура «бесконечность» может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:
Бабл для комментария
HTML 
Для создания фигуры «библ», создаем div с ID comment_bubble:
CSS 
Эта фигура может быть создана путем создания треугольника и задания свойства border radius, а затем присоединения прямоугольника к его левой стороне:
Pacman
HTML 
Для создания фигуры «pacman», создаем div с ID pacman:
CSS 
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:
Заключение
Есть множество возможностей создания фигур с помощью CSS3. Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый «костыль» в случае браузеров эпохи юрского периода, на подобии Internet Explorer.
Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.
Перевод статьи «Make Shapes with CSS: How to Create Different Shapes in CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.
Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?
Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.
Четвертые части каждой окружности формируют закругленные углы элемента.
Когда объединяются толстые рамки
При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
border: 6px solid crimson;
Пока нет проблем.
Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.
border: 14px solid crimson;
Рамка становится шире, а углы изображения – квадратными.
Почему так происходит?
Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.
Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Чтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.
border: 14px solid crimson;
При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.
Метод Box-shadow
При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.
Расширенный радиус устанавливает растянутый интервал тени блока. Если установить офсеты и размытие на 0, определенное значение расширения сформирует вокруг элемента четкую рамку.
box-shadow: 0 0 0 14px crimson;
Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.
Применение переменных Sass
Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.
$radius: $border-width*1.9; border: $border-width solid crimson;
Заключение
Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.
Создаем закруглённые уголки с помощью CSS 3

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.
Кроссбраузерная совместимость
К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 1.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).
Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.
Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами. Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome. Для начала создадим простой блок, для которого мы и будем применять свойство border-radius.
В CSS зададим для него высоту, ширину и цвет фона:
Добавляем свойство border-radius:
Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
Теперь все четыре угла будут иметь радиус 20px:Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
Объявляем свойство border-radius для каждого угла
Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:

moz-border-radius-topleft для верхнего левого угла;
moz-border-radius-topright для верхнего правго угла;
moz-border-radius-bottomright для нижнего правого угла;
moz-border-radius-bottomleft для нижнего левого угла;

Горизонтальный и вертикальный радиус
Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса. При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
Использование свойства border-radius в Safari и Chrome
Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:

-webkit-border-top-left-radius для верхнего левого угла;
-webkit-border-top-right-radius для верхнего правого угла;
-webkit-border-bottom-right-radius для нижнего правого угла;
-webkit-border-bottom-left-radius для нижнего левого угла;

При использовании краткой записи необходимо иметь ввиду, что её можно использовать только когда значения для всех углов равны, если значения разные, то необходимо указывать свойства для каждого угла. Этот код не будет работать в Safari и Chrome:
Правильный код будет выглядеть так:
Горизонтальный и вертикальный радиус в Safari и Chrome
В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
Закругленные углы в CSS

Описание примера
Свойства с префиксами отсутствуют в спецификации CSS, поэтому их использование приведет к невалидному коду.
Закругленные углы в CSS без изображений
В этом примере тоже нет изображений, однако используются дополнительные блоки. Суть метода состоит в том, что перед основным содержимым и после него, указывается несколько блоков, которые по мере удаления от него понемногу уменьшаются в ширине с помощью боковых внешних полей. Благодаря этому и происходит имитация закругления углов.
Данный способ плох тем, что код «замусоривается» дополнительными блоками, но, к сожалению, во многих примерах подобные блоки будут присутствовать. Еще один минус — при больших радиусах закругления придется добавлять еще больше блоков, чем используется в примере.
Пример HTML и CSS: закругление углов без использования изображений
Описание примера
Закругленные углы с помощью боковых блоков
В предыдущем примере размер блока у нас был фиксированный и зависел от размера фоновой картинки, а это очень неудобно. Сейчас мы сделаем так, чтобы ширина нашего блока была изменяемой. Для этого вырежем у изображения три части — боковушки и кусочек центра.
Затем поместим внутрь основного блока два элемента с фиксированными размерами, которые, благодаря абсолютному позиционированию, разместим у него по бокам. В качестве фона зададим им те самые боковые части, а основному блоку — центральную часть.
Так у нас получится блок с закругленными углами, у которого будет изменяемая ширина.
Такой прием очень часто используется для закругления однострочных элементов, таких как ссылки или названия разделов/меню.
Пример HTML и CSS: закругление углов с использованием боковых блоков
Описание примера
В IE6 есть пара проблем с этим способом:
Закругленные углы с помощью позиционирования и спрайта
По сути, технология этого способа закругления углов в CSS такая же, как и в предыдущем, поэтому подробные комментарии тут будут опущены.
Единственное отличие — вместо отдельных фоновых изображений-уголков здесь используется одна общая картинка-спрайт.
Благодаря этому ускоряется загрузка сайта, ведь одно изображение «весит» меньше, чем четыре и к хостингу идет одно обращение вместо четырех.
Спрайт — изображение, которое объединяет в себе сразу несколько картинок используемых в качестве фона для элементов сайта. Какая именно часть спрайта будет фоном у того или иного HTML-элемента зависит от координат заданных в специальном CSS-свойстве.
Пример HTML и CSS: закругление углов с использованием позиционирования и спрайтов
Описание примера
С IE6 здесь те же проблемы, что и в предыдущем примере.
Закругленные углы с помощью псевдоэлементов
В данном примере мы закруглим углы у элемента, который имеет рамку, но это не является какой-то особенностью именно этого способа — вы вполне можете использовать закругление с рамкой и в предыдущих примерах.
Сами закругления мы сделаем, используя псевдоэлементы созданные у основного блока, но без применения к ним позиционирования.
И еще один момент. В предыдущих примерах уголки вырезались вместе с фоном внутри, а это не всегда нужно, особенно, если предполагается, что фон у блока с закругленными углами будет неоднородным.

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

Если нужно, то подобный подход вы тоже можете использовать в предыдущих примерах.
Пример HTML и CSS: закругление углов с использованием псевдоэлементов
seodon.ru — Закругляем углы в CSS с помощью псевдоэлементов Содержимое блока.
Описание примера
Для IE6 и IE7 мы здесь применили уже знакомые вам «костыли» с внедрением HTML-кода, так как эти браузеры не понимают используемые здесь псевдоэлементы:
Минус этого способа в том, что блоку с закругленными углами нельзя явно задать высоту, ведь если она будет превышать размеры содержимого, то нижние уголки не прижмутся к краям. Этого можно избежать, если все-таки заключить основное содержимое в еще один блок и высоту задавать ему.
Еще один пример закругления углов с псевдоэлементами и без дополнительных блоков
Этот пример похож на предыдущий, но здесь для расстановки псевдоэлементов используется позиционирование. Благодаря такому подходу появилась возможность явно указывать высоту блока с закругленными углами.
Пример HTML и CSS: закругление углов, где можно изменять высоту блока
seodon.ru — Закругляем углы в CSS с помощью псевдоэлементов, где у блока можно задавать высоту Содержимое блока.
Описание примера
Так как этот способ похож на предыдущий, то опишу только их отличия.
И снова для IE6 и IE7 добавляем внутрь основного блока несколько дополнительных элементов с помощью expression, а код закрываем в условные комментарии. Вот только в этот раз мы даже не будем пытаться эмулировать псевдоэлементы, а поступим проще.
К слову сказать, на самом деле проще было бы все-таки эмулировать псевдоэлементы, как мы это сделали в предыдущем примере — так добавочный код был бы меньше. Но только не в IE6, для этого браузера понадобилось бы еще несколько «костылей» и, как следствие, пришлось бы писать два отдельных условных комментария — для IE6 и IE7, а это только раздуло бы код…
В Firefox этот способ работает корректно с версии 3.6, а в Opera — с версии 10.0, костыли для них я придумывать не стал, так как это малоактуально.
Закругленные углы используя CSS

Приветствую, Друзья. Данная статья посвящена довольно популярной теме среди начинающих вебмастеров — закругленные углы CSS. Вопросы, которые я попытаюсь, раскрыть будут касаться того, как сделать скругленные углы элементов сайта, используя только CSS не прибегая к использованию каких-либо изображений.
В данном способе есть, как плюсы, так и минусы.
Плюсы, конечно же, заключаются в том, что нет необходимости создавать изображения, используя какой-либо графический редактор, загружать их на сервер, а потом расставлять с помощью CSS на необходимые места для создания нужного эффекта. При этом необходимо создавать дополнительные элементы в HTML-коде, а также прописывать отдельные свойства для каждого из них.
Что касается минусов, то здесь можно отметить одну проблему — это поддержка данного свойства не всеми веб-браузерами, особенно это касается устаревших версий различных браузеров.
Однако закругление углов с помощью CSS становится все популярнее и популярнее. Как Вы уже могли понять, в данной статье мы будем использовать свойство доступное в CSS 3.
Скругленные углы с помощью CSS
Итак, для примера мы возьмем блочный элемент DIV и сделаем его углы скругленными. Для примера создадим блок, и прямо в HTML-коде будем назначать ему свойства, используя атрибут style. Сначала мы имеем блочный элемент залитый фоном любого цвета:
Кстати, если Вам необходимо узнать какой код цвета у Вас на сайте или на любом другом, Вам пригодится данная статья.
А вот так мы увидим его в веб-браузере:
Теперь, чтобы закруглить углы воспользуемся свойством «border-radius», которое можно перевести, как радиус границы. Да именно так, а не как многие могли подумать, что это радиус рамки или как там его еще называют (border).

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

Значением для данного свойства являются любые числовые значения, которые применимы в CSS, такие как проценты, пикселы (px), пункты (pt) и так далее.
Да, и следует учитывать, что данное свойство работает сразу на все четыре угла элемента, кроме того, можно указать разный радиус для каждого угла, но об этом чуть позже. Для начала зададим радиус углов нашего прямоугольника. Пусть он будет равен 5 пикселам:
Тогда элемент станет выглядеть так:
Теперь, предлагаю разобраться в том, как добавить свой радиус для каждого угла в отдельности. Для этого мы можем воспользоваться свойством, которое можно применить для каждого угла в отдельности. Если говорить о прошлом примере, то в полном виде свойства для элемента выглядели бы так:
border-top-left-radius:5px; /* верхний левый угол */ border-top-right-radius:5px; /* верхний правый угол */ border-bottom-right-radius:5px; /* нижний правый угол */ border-bottom-left-radius:5px; /* нижний левый угол */Важно
То есть, если мы хотим задать каждому углу свое значение, мы имеем такую возможность, и чтобы убедиться в этом возьмем следующий код:
И тогда мы получим такой результат:
Как мы можем видеть, для границы каждого угла задано свое значение радиуса. 
Кроме того CSS позволяет нам задать значение для границы каждого угла в виде короткой записи, которая будет выглядеть так:
Где значения будут следовать в таком порядке:
border-radius: 5px /* верхний левый угол */ 10px /* верхний правый угол */ 15px /* нижний правый угол */ 20px /* нижний левый угол */;
Соответственно, исходя из выше сказанного, становится понятно, что таким же образом мы можем задать границу радиуса только для трех (одного или двух) углов:
Так это выглядит в веб-браузере:
Если Вы еще не совсем запутались, то продолжим. Дело в том, что радиус для каждой границы угла может быть указан не в одном значении, как мы рассматривали выше, а в двух. То есть два значения для каждого угла. В таком случае первое значение установит радиус для угла по горизонтали, а второе по вертикали. Давайте начнем сначала с одного угла:
В данном примере мы воздействовали только на левый верхний угол элемента:
Если расставить значения наоборот, тогда элемент станет выглядеть так:
На этом вроде бы можно было бы, и закончить, но нет. Есть еще одна хитрость. В значении свойства мы можем использовать слеш (/) между значениями. Слеш может помочь нам совместить значения с другими значениями.
В общем проще показать, чем рассказать. Начнем с простого. Предположим, что нам необходимо, чтобы по горизонтали радиус был равен 35 пикселам, а по вертикали 5. При этом, чтобы данные значения относились ко всем углам.
Тогда мы можем написать так:
И получить вот такой результат:
Теперь рассмотрим пример посложнее:
В данном случае значение до знака слеша (/) будет иметь отношение к горизонтальному радиусу угла, а после знака к вертикальному. При этом значения будут относиться друг к другу таким образом:
border-top-left-radius: 20px 15px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 40px 15px; border-bottom-left-radius: 10px 25px;
А результат будет таким:
И в завершении статьи поговорим о поддержке различными браузерами данного свойства.
Закругление углов в различных веб-браузерах
Здесь стоит отметить, что данное свойство поддерживается не всеми версиями браузеров. Свойство поддерживается в IE9 +, Firefox 4 +, Chrome, Safari 5 +, и Опера.
Но для некоторых браузеров версии, которых не поддерживают данное свойство, существуют нестандартные свойства, которые добавляют, так называемый префикс или приставку к свойству. Chrome до версии 4.0, Safari до версии 5.
0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius. Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.
При этом нам придется продублировать свойство, используя данные префиксы. Например, если у нас задано свойство для границы левого верхнего угла значение, которого равно пяти пикселам:
Тогда свойство с дублированием его с помощью префиксов будет выглядеть так:
-webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; border-top-left-radius: 5px;
Очень надеюсь, что смог понятно все объяснить и Вам теперь понятно, как сделать закругленные углы, используя только CSS. 
Удачи, Вам!
Создаем закругленные углы на сайте при помощи CSS без применения Javascript

Здравствуйте уважаемые читатели блога dmitriydenisov.com.
Это вторая статья в категории «HTML, PHP, CSS и MySQL» и в ней я хочу рассказать о том, как создать на своем сайте закругленные углы при помощи CSS без применения разнообразных скриптов.
Этот метод очень удобный и я решил написать про него отдельную статью, в которой приведу рабочий пример кода и расскажу, как с ним работать и реализовать на своем сайте закругление углов самостоятельно.
Недавно я занялся усиленной оптимизацией своего сайта и, проанализировав много графиков, выявил, что зачастую виной долгой загрузки являлись Javascript, которые отвечали за создание закругленных углов на моем сайте.
Поначалу я использовал именно этот метод так как для того чтобы его реализовать достаточно было добавить в нужный документ нужное нам правило CSS или класс.
Сделав это, загрузка моих страниц еще больше ускорилась и теперь ее скорость в большей степени зависит только от ситуации на хостинге. На данный момент Page Speed главной страницы моего сайта составляет 86%, что очень даже неплохо.

Подробнее об ускорении своих сайтов вы можете прочитать в статьях «Ускорение загрузки страниц сайта. Оптимизация изображений, css, html и php кода. Настройка .htaccess» и «Оптимизация блога WordPress для снижения нагрузки на сервер».

Итак, для того чтобы создать закругленные углы при помощи CSS вам нужно будет сделать следующее.
Для начала подготовить все необходимое для работы, а именно текстовый редактор NotePad++ для редактирования файлов сайта, FTP клиент для закачки этих файлов на сервер, различные браузеры для проверки правильного отображения и дополнение к Mozilla Firefox под названием FireBug, которое понадобится нам для доведения наших закругленных углов до нормального вида.
Давайте сначала кратко по пунктам разберемся, что нам предстоит сделать для того, чтобы создать закругленные углы на своем сайте.

Открыть таблицу стилей и добавить в него правила CSS для закругленных углов
Добавить код закругленных углов во все необходимые файлы своего сайта.
При помощи дополнения FireBug определить недоработки и устранить их.

Третий пункт очень важен, так как зачастую нужно будет убирать разные отступы и тому подобное. Например, мы создаем закругленные углы для класса, отвечающего за отображение статьи.
У него уже есть свои правила CSS, одним из которых, зачастую, есть верхние отступы. Если их не убрать, то закругленные углы просто не состыкуются с основным блоком и будут висеть над ним.
Все это будет иметь примерно следующий вид.
Как видите это не совсем то, что нам нужно. Для большего удобства работы и более быстрого поиска причины проблемы нам и понадобится FireBug. Скачать его вы можете перейдя по этой ссылке.
После установки все что вам понадобится, это нажать на значок в виде жука в правом нижнем углу браузера Mozilla Firefox, после чего нажать на кнопку «Инспектировать объект» и выделить нужную нам часть дизайна на сайте.
В результате справа в нижнем углу браузера вы увидите правила CSS отвечающие за формирование того элемента дизайна, который вы выделили. На этом краткая инструкция по FireBug заканчивается, и мы возвращаемся к созданию закругленных углов для нашего сайта.
Создание правил CSS для закругленных углов
Первым делом нам необходимо создать правила CSS, которые будут определять внешний вид скругленных краев. Для этого откройте таблицу стилей своего сайта и добавьте где-то ближе к верху следующие CSS правила.
Свойство background:#fff; задают цвет фона. В данном случае закругленные края будут иметь белый цвет. При необходимости вы можете изменить его на свой.
border-right:1px solid #fff; — в этом свойстве вы можете изменить цвет закругленных углов с белого #fff на любой другой. Больше никаких изменений вносить я не рекомендую, так как это может нарушить функциональность данного метода создания закругленных углов.
Итак, с таблицами стилей мы разобрались. Теперь переходим к следующему этапу.
Код для создания закругленных углов при помощи CSS
Добавления CSS правил в таблицу стилей недостаточно для придания нашим углам закругленного вида. Для этого нам потребуется добавить специальный код в страницы своего сайта.
Для создания верхних закругленных углов нужно перед нужным вам классом CSS добавить этот код:
А для создания нижних углов вот этот код:
Одним словом вам нужно сделать следующее. Найти блок, углы которого вы хотите закруглить и добавить вышеприведенный код перед началом и сразу в конце нужного вам блока.
Для наглядности наведу пример.

В картинке приведенной выше применен серый цвет фона, а нужный нам текст заключен в теги с классом Наглядно это выглядит так:

Текст нашей статьи, который находится в блоке, для которого мы создаем закругленные углы.
Для того, чтобы создать для него закругленные углы нам необходимо сверху и снизу вставить код, который я приводил выше. В итоге у вас должно получиться следующее:
Текст нашей статьи, который находится в блоке, для которого мы создаем закругленные углы.
Естественно я не приводил весь код, а обрезал его, поставив три точки, чтобы уменьшить объем статьи. Вам же нужно будет вставлять код целиком. Надеюсь, суть этого метода вам понятна.
На этом я заканчиваю статью о создании закругленных углов для сайта. Если у вас остались какие-то вопросы по ней вы всегда можете задать их в комментариях.
На этом все. Удачи вам и до скорых встреч на страницах блога.
Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter
Скругление углов CSS3

Сегодня хочу рассказать о таком свойстве CSS3, как border-radius, позволяющее создать закругленную границу вокруг прямоугольного блока.
Backgrounds and Borders module на данный момент всё ещё остается черновым документом W3C, поэтому при именовании свойства border-radius браузеры используют вендорные префиксы:

-moz- используется в браузерах на основе движка Gecko (Firefox и SeaMonkey)
-webkit- в браузерах на основе одноименного движка (Safari и Chrome)

Браузер Opera обходится без вендорного префикса, ну а IE, оправдывая своё народное название «осла», вовсе не поддерживает данного свойства.
Скругление углов средствами CSS3. В данном примере не используется JS или картинки.
Для скругления углов, как в примере выше, элементу div были назначены следующие свойства: ширина бордюра 5 пикселей, радиус скругления углов 20 пикселей. Причем для правильного отображения в разных браузерах были добавлены вендорные префиксы.
border:5px solid #545751; 
border-radius:20px; 
-moz-border-radius:20px; 
-webkit-border-radius:20px;Важно
В этом примере свойство border-radius используется в простейшей форме, закругляя все четыре угла блока с одинаковым радиусом. Можно задать каждому углу свой радиус скругления, перечисляя значения начиная сверху и по часовой стрелке.
При указании двух или трех значений, пропущенные значения берутся из противоположных углов (top, right, bottom, left). Следующие примеры буду писать без вендорных префиксов, собственно подставить их не трудно.
border-radius:25px 0 10px 0;
C этим, полагаю разобрались, ничего сложного тут нет. Более интересная задача — скругление углов у изображений.
Задача интересна прежде всего тем, что нужно добиться скругления углов у изображения ещё и с определенной рамкой, не зависимо от фона и размеров картинки, и возможностью задавать радиус скругления. На первый взгляд задача не выполнимая.
Берем любую картинку и пробуем в лоб применить к ней свойство border-radius.
Получили явно не то, что ожидали, бордюр со скруглением есть, а вот картинка как была, так и осталась…
Решение довольно простое — предлагаю использовать картинку в качестве фона элемента div.
Вот теперь получили желаемый результат — скругление работает. Смущает один момент, а именно необходимость вручную указывать размеры картинки.
Чтобы этого не делать, вставим внутрь нашего блока ту же картинку с указанием ей свойства visibility:hidden, т.е. сделаем её невидимой. В результате картинка будет распирать содержащий её контейнер и сама задаст необходимые размеры нашему блоку с бэкграундом.
И напоследок про костыли для IE. Даже это тупое животное можно научить закруглению углов, но тут не обойтись без сторонней библиотеки CSS3 Pie. Данная библиотека реализует многие CSS3 свойства в IE6-8, в том числе и border-radius (кстати, весит всего 28Кб). Для её подключения потребуется в CSS классу .img-radius добавить строчку:
Если считаете статью полезной, 
не ленитесь ставить лайки и делиться с друзьями.
Похожие публикации:

Как закрепить футер внизу страницы css
Как запретить клик по элементу css
Как создать кнопку css
Как создать стиль css



Похожие публикации:

В какую цену луаз
Как долго сохранить мимозу пушистой в вазе
Как развернуть число в python
Как снять генератор renault logan