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

Закругленные углы используя 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 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 зададим для него высоту, ширину и цвет фона:
#box width:590px;
height:100px;
background-color:#6B86A6; >

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:
#box -moz-border-radius: 20px;
>

Теперь все четыре угла будут иметь радиус 20px:

Вы также можете указать два значения, первое из которых будет определять радиус для верхнего левого и нижнего правого угла, а второе — для верхнего правого и нижнего левого:
#box -moz-border-radius:20px 40px;
>

Если Вы указываете три или четыре значения, они будут применяться в следующем порядке — верхний левый угол, верхний правый угол, нижний правый угол и нижний левый угол.
#box -moz-border-radius:10px 20px 30px 40px;
>

Объявляем свойство border-radius для каждого угла

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

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

Горизонтальный и вертикальный радиус

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:
#box -moz-border-radius-topleft: 30px 15px;
>

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

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:
#box -moz-border-radius: 30px / 15px;
>
#box -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
>

Использование свойства border-radius в Safari и Chrome.

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

Этот код не будет работать в Safari и Chrome:
#box -webkit-border-radius: 10px 20px 30px 40px;
>

Правильный код будет выглядеть так:
#box -webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px;
>

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:
#box -webkit-border-top-left-radius: 30px 15px;
>

При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:
#box -webkit-border-radius: 30px 15px;
>

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

Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов.

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

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

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

Приветствую вас, дорогие читатели!

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

Навигация по статье:

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

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

Как, например, здесь:

Круто, не правда ли?! Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

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

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

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

И вот что мы получим в итоге:

Сразу предупреждаю, что старые версии старые версии браузера Internet Explorer, а также некоторые мобильные браузеры не понимают этого CSS свойства и отображают углы незакруглёнными.

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

Для картинки CSS код будет выглядеть так:

Вот что получится:

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

Куда вставлять CSS код?

У вас есть аж целых 3 варианта как прописать данное CSS свойство и закруглить углы для элементов на вашем сайте:

Где вместо «round-corner» будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.

Выглядеть это будет так:

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

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

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

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

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

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

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

.borderElement .borderElement1

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

.borderElement

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

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

Приветствую вас, дорогие читатели!

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

Навигация по статье:

Если у вас появилась такая необходимость вы можете воспользоваться стандартным CSS-свойством border-radius. Например:

В данном случае для блока задается параметр для всех сторон.

Так же, можно задавать радиус для каждого отдельного угла. Например:

border-radius: 5px 15px 25px 35px;

Как видите, принцип задания параметров скругления такой же, как и у других свойств, работающих для разных сторон блока (margin, padding и т.д.). Параметры задаются по часовой стрелке, начиная с левого верхнего. Таким образом, получается, что мы задали скругление для левого верхнего угла 5px, для правого верхнего – 15px, для нижнего правого — 25px, и для нижнего левого 35px.

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

border-radius: 5px 35px;

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

Необычное скругление углов CSS

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

Для этого нам нужно задать два параметра скругления через слеш. Например:

Используя данный вариант можно даже элипс:

Благодаря использованию различных комбинаций скругления уголов CSS-стилями вы можете добиться очень интересных форм для блоков с контентом и кнопок для вашего сайта. Главное не перестараться:)

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

А на этом у меня сегодня все. Желаю вам успехов в экспериментах. До встречи в следующих статьях!

С уважением Юлия Гусарь

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

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

Четвертые части каждой окружности формируют закругленные углы элемента.

Когда объединяются толстые рамки

При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее .mike

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

$radius: $border-width*1.9; border: $border-width solid crimson;

Заключение

Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.

Маленькая подсказка: Делайте правильно скругленные углы

Это может показаться незначительным для многих из вас, но я так часто с этим сталкиваюсь, что я считаю нужным рассмотреть этот вопрос. Мы называем эту проблему неправильно вложенными углами; небольшая деталь, которая может разрушить замечательный дизайн!

Кто тут педантичен?

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

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

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

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

Сгибаем трубы

Думайте об эффекте, который вы создаете, как о сгибании труб:

Рабочий гнет трубы

Посчитайте

Интерфейсы, созданные на html/css, могут часто усложнить задачу по закруглению углов. Вспомните о формах или кнопках.

Здесь невозможно быть излишне точным; разница между обоими border radius должна равняться промежутку между ними. Просто!

И оно тоже может быть адаптивным, например:

Отлично закругленные углы (смотрите демо).

Исключения

Как и везде в дизайне, четких правил не существует и здесь. Вы всегда найдете исключения. Это дело ощущений.

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

Выпадающее меню – UI/UX с CSS3 от Джонатана Морейра

Те, кто сделали это правильно

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

Snooker Table icon by JJ-Maxer Postale Icon App by Aditya Nugraha Putra Icon by chnvan Found UI by Martin Karasek Veggie Meals app icon by Max Rudberg Upload button by Fares Farhan BPM Lock Button (ON) by Paul Flavius Nechita Sign In Button by Brad Haynes

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

Border radius background

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

Чтобы радиус отображался в других браузерах, запись производится с дополнительными префиксами:

Префикс -moz записывается для отображения в браузере Firefox ,
а –webkit , для Safari и Google Chrome .

Скругление углов CSS

Одинаковые радиусы по диагонали

Свойство border-radius с двумя значениями отображает одинаковые радиусы по диагонали. Первое значение задаёт верхний левый и нижний правый радиус, а второе верхний правый и нижний левый.

1. Верхний левый и нижний правый – 40px

2. Верхний правый и нижний левый – 20px

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

Два равных радиуса по диагонали и два по отдельности

У свойства border-radius с тремя значениями первый параметр отображает радиус верхнего левого угла, второй верхнего правого и нижнего левого, а третий нижнего правого.

1. Верхний левый – 10px

2. Верхний правый и нижний левый – 40px

3. Нижний-правый – 20px

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

Каждый радиус задаётся в отдельности

Свойство border-radius с четырьмя значениями указывает на то, что каждое закругление угла задаётся по отдельности. Первое значение задаёт верхний левый радиус, второй верхний правый, третий нижний правый, четвёртый нижний левый.

Создание закругленных углов с помощью CSS [закрыто]

Поскольку CSS3 был представлен, лучший способ добавить закругленные углы с помощью CSS — использовать border-radius свойство. Вы можете прочитать спецификацию свойства или получить полезную информацию о реализации в MDN :

Если вы используете браузер, который не поддерживает border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), то ссылки ниже детализируют целый ряд различных подходов. Найдите тот, который подходит вашему сайту и стилю кодирования, и используйте его.

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

Именно так вы и хотели бы, чтобы это работало. Хотя это работает нормально в последних версиях Safari и Firefox, но совсем не в IE7 (и я не думаю, что в IE8) или Opera.

В то же время, он взломал весь путь вниз. Мне интересно услышать, что другие люди считают самым чистым способом сделать это в IE7, FF2 / 3, Safari3 и Opera 9.5 на данный момент.

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

Если вы хотите использовать все углы с одинаковым радиусом, это простой способ:

но если вы хотите контролировать каждый угол, это хорошо:

Как вы видите в каждом наборе, у вас есть специфичные для браузера стили, а в четвертых строках мы объявляем стандартным образом, и мы предполагаем, что в будущем другие (надеюсь, IE тоже) решат реализовать эту функцию, чтобы наш стиль был готов к ним.

Как сказано в других ответах, это прекрасно работает на Firefox, Safari, Camino, Chrome.

Если вы заинтересованы в создании углов в IE, то это может быть полезно — http://css3pie.com/

Я бы порекомендовал использовать фоновые изображения. Другие способы не так хороши: нет сглаживания и бессмысленной разметки. Это не место для использования JavaScript.

Как сказал Браджешвар: Использование border-radius селектора css3. К настоящему времени вы можете подать заявку -moz-border-radius и -webkit-border-radius на браузеры на базе Mozilla и Webkit соответственно.

Итак, что происходит с Internet Explorer? У Microsoft много способов поведения, чтобы Internet Explorer имел некоторые дополнительные функции и получал больше навыков.

Здесь: .htc файл поведения для получения значения round-corners из border-radius вашего CSS. Например.

Конечно, селектор поведения не является действительным селектором, но вы можете поместить его в другой файл CSS с условными комментариями (только для IE).

С поддержкой CSS3, реализованной в более новых версиях Firefox, Safari и Chrome, также будет полезно взглянуть на «Границы радиуса».

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

JQuery — это способ, которым я бы справился с этим лично. Поддержка CSS минимальна, изображения слишком неудобны, чтобы иметь возможность выбирать элементы, которые вы хотите иметь круглые углы в jQuery, имеет для меня смысл, даже если некоторые, без сомнения, утверждают иначе. Вот плагин, который я недавно использовал для проекта на работе здесь: http://plugins.jquery.com/project/jquery-roundcorners-canvas

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

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

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

Обновлено: улучшено внедрение с помощью спрайт-листа.

Мне лично больше всего нравится это решение, его .htc позволяет IE отображать кривые границы.

В Safari, Chrome, Firefox> 2, IE> 8 и Konquerer (и, возможно, других) вы можете сделать это в CSS, используя border-radius свойство. Поскольку это официально не является частью спецификации, пожалуйста, используйте префикс конкретного поставщика .

пример

Решения JavaScript обычно добавляют кучу маленьких div s, чтобы они выглядели округлыми, или они используют границы и отрицательные поля, чтобы сделать 1px зазубренные углы. Некоторые могут также использовать SVG в IE.

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

Вот решение HTML / js / css, которое я недавно сделал. В IE есть ошибка округления в 1px с абсолютным позиционированием, поэтому вы хотите, чтобы контейнер имел четное число пикселей в ширину, но он довольно чистый.

Изображение всего 18px шириной и имеет все 4 угла, упакованных вместе. Похоже на круг.

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

Как указание на то, как сложно заставить работать закругленные углы, даже Yahoo не рекомендует их (см. Первый пункт с маркировкой)! Конечно, в этой статье они говорят только о закругленных углах в 1 пиксель, но интересно видеть, что даже компания со своим опытом пришла к выводу, что им слишком больно, чтобы заставить их работать большую часть времени.

Если ваш дизайн может выжить без них, это самое простое решение.

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

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

Рузи Границы — это единственное решение на основе Javascript с сглаженными закругленными углами, которое я обнаружил, которое работает во всех основных браузерах (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), а также единственное, которое работает, когда и округленный элемент И родительский элемент содержат фоновое изображение. Он также делает границы, тени и светящиеся.

Более новый RUZEE.ShadedBorder — это еще один вариант, но в нем отсутствует поддержка для получения информации о стиле из CSS.

Если вы хотите использовать решение border-radius, есть этот замечательный веб-сайт для генерации CSS, который заставит его работать для safari / chrome / FF.

Читать:

Как узнать продолжительность работы телевизора lg

В любом случае, я думаю, что ваш дизайн не должен зависеть от закругленного угла, и если вы посмотрите на Twitter, они просто скажут F **** IE и пользователям Opera. Закругленные углы приятно иметь, и я лично держу это для крутых пользователей, которые не используют IE :).

Теперь, конечно, это не мнение клиентов. Вот ссылка: http://border-radius.com/

В дополнение к упомянутым выше htc-решениям, есть еще несколько решений и примеров, позволяющих достичь закругленных углов в IE .

Нет лучшего пути; Есть способы, которые работают для вас, и способы, которые не работают. Сказав это, я разместил здесь статью о создании технологии CSS + Image, основанной на плавных поворотах углов:

Обзор этого трюка заключается в том, что он использует вложенные DIV и повторение и позиционирование фонового изображения. Для макетов с фиксированной шириной (растягиваемая высота с фиксированной шириной) вам потребуется три DIV-файла и три изображения. Для макета с изменяемой шириной (растягиваемая ширина и высота) вам потребуется девять DIV и девять изображений. Некоторые могут посчитать это слишком сложным, но ИМХО это самое лучшее решение, которое когда-либо было. Нет хаков, нет JavaScript.

Я написал статью в блоге об этом некоторое время назад, так что для получения дополнительной информации, смотрите здесь

Это работает довольно хорошо. Не требуется Javascript, только CSS и HTML. С минимальным HTML, мешающим другим вещам. Это очень похоже на то, что опубликовал Mono, но не содержит никаких специфических взломов для IE 6, и после проверки, похоже, не работает вообще. Кроме того, еще одна хитрость заключается в том, чтобы сделать внутреннюю часть каждого углового изображения прозрачной, чтобы он не блокировал текст, находящийся рядом с углом. Внешняя часть не должна быть прозрачной, чтобы она могла покрывать границу округлого элемента div.

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

Не используйте CSS, jQuery был упомянут несколько раз. Если вам нужен полный контроль над фоном и границей ваших элементов, попробуйте плагин jQuery Background Canvas . Он помещает HTML5-элемент Canvas на задний план и позволяет рисовать любой фон или границу. Закругленные углы, градиенты и прочее.

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

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

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

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

Лиса нюхает цветок

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

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

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

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

1	2	3
1.1	2.1	3.1
1.2	2.2	3.2

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

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

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

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

Округление outline

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

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

HTML овал

HTML круг

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

HTML цилиндр

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

HTML полукруг

HTML лист

HTML яйцо

Камушек HTML

29 комментариев:

Tanka Спасибо! Очень интересно =) витько Польза.
Приятный сайт,полезная статья Анонимный Спасибо большое! Давно искала такой материал. Супер сайт. Наталка Михайлівна Зуб Я как всегда ничего не поняла (ну далекая я от всего этого). Скажите пожалуйста, можно ли в моем шаблоне(путешествие) сделать закругленные углы, чтобы было как в шаблоне Венецианское окно (вариант 2).Там еще на главной странице каждое сообщение отделено один от одного, а у меня идет одним потоком и где заканчивается одно сообщение и начинается второе можно узнать только по дате.
Мой блог http://revival2012nataliz.blogspot.com/ NMitra Посмотрите эту страницу http://shpargalkablog.ru/2010/12/pomenyat-fon-gadzhetov-blogger.html Наталка Михайлівна Зуб Спасибо большое!С закругленными углами для гаджетов не получилось, так как тяжело потом подобрать цвет фона под блог и встроенные гаджеты не очень(погодный информер глобус и т.д.)Но главное что получилось с сообщениями.Еще раз спасибо за помощь!Я часто пользуюсь Вашей помощью и Ваш блог мне очень помогает! Сергей А этот код поддерживается во всех браузерах? Хочу сделать округлые пункты меню http://antiloh.net в шапке сайта. Сергей В IE не работает, не критично — для информации NMitra Последние версии IE поддерживают это свойство. См http://caniuse.com/#search=border-radius Космо Мизраил «Чтобы сделать круг, нужно использовать квадрат.»
Мой мозг х) Наталья, может, стоит написать «использовать блок квадратной формы»? �� NMitra Ха-ха-ха.. Подправила. Евгений Курочкин Отличная статья!
Для скругления в IE 6-8 есть доп коды — http://css3pie.com/, например. Не пренебрегайте IE, так как много пользователей работают именно с ним. NMitra На мой взгляд, увидит человек скруглённые уголки или нет не сильно повлияет на работоспособность сайта. Поэтому именно в этом случае можно пренебречь поздними версиями IE. Гораздо хуже, если человек не сможет воспользоваться формой заказа, потому что использован document.querySelector.

Вот позиция Гугл мне нравится: наплевали они на всех, кто ранние версии браузеров используют. Хочешь красивого вида сайта — нажми кнопку «Обновить». Анонимный Мне понравилась фига — фавикон сайта =) NMitra Мне тоже)) Жаль, что её некоторые путают с другой частью тела. Родион Спасибо огромное! NMitra Пожалуйста! Анна Сычева Спасибо огромное! нашла то, что искала, и даже лучше! рамка из тени — это просто праздник �� NMitra Рада слышать! Анонимный бабки давай сюда! Fedor Timofeev Как сделать что бы стили не конфликтовали?
Не работает стиль
/*Круглые углы у таблицы */
div.radius
/*Круглые углы у таблицы конец */

Если ставлю стиль
img.grayscale
img.grayscale:hover
.grayscale.grayscale-replaced > svg
.grayscale.grayscale-replaced.grayscale-fade:hover > svg
img.grayscale

/*обесцвечивание круглой картинки конец */

CSS: /*Круглые углы у таблицы */
div.radius
/*Круглые углы у таблицы конец */
Fedor Timofeev что все дивы куда то подевались. NMitra Здравствуйте, код в комментариях через http://shpargalkablog.ru/2010/12/napisat-kod-tekstom.html пропустите. И всё же я не поняла что не так. Как могут конфликтовать стили, если они привязаны к разным тегам? Расскажите, пожалуйста, на словах, например, так «Картинка с нарисованным попугаем должна быть закруглена на 15px, а она на 50%». Fedor Timofeev Так, ладно, на пальцах.
До того как в CSS вставил /*обесцвечивание круглой картинки */

img.grayscale
img.grayscale:hover
.grayscale.grayscale-replaced > svg
.grayscale.grayscale-replaced.grayscale-fade:hover > svg
img.grayscale

ВОТ ЭТОТ СТИЛЬ, который ниже, РАБОТАЛ
CSS: /*Круглые углы у таблицы */
div.radius
/*Круглые углы у таблицы конец */
НО ПОСЛЕ ПОЯВЛЕНИЯ В CSS /*обесцвечивание круглой картинки */

Стиль border-radius: 15px; тупо не работает. NMitra Проверяйте ошибки в CSS. Я, например, увидела «яЛП»

img.grayscale яЛП Fedor Timofeev Спасибо большое за содействие но проблема решилась и Ваша помощь тоже была очень нужна.
Здесь мне всё помогли:
http://goo.gl/BRNaui
С удовольствием размещу ссылку на Ваш ресурс без rel=»nofollow» на своем сайте без всяких условий с моей стороны.
Укажите как Вы хотите видеть свою ссылку.
На почту vamsydanado-a@yandex.ru

NMitra А я увидела в исходном коде не точку, а «яЛП»

По поводу ссылки: с каким пожелаете анкором, на какую захотите страницу. Всегда считала, что естественную ссылку может поставить только автор веб-проекта. А на «Шпаргалку блоггера» ведут в основном такие.

Свойство CSS border-radius

Синтаксис CSS border-radius :

Как скруглить углы в HTML через CSS

Рассмотрим примеры скругления углов через CSS. Например

В этом случае все 4 края элемента будут скруглены по 30px.

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

Что означают размер скругления углов CSS

Можно скруглять каждый угол с разными радиусами. Для этого нужно написать

Последовательность этих цифр следующая:

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

Чтобы не запоминать какое значение за каким идет можно писать в CSS в отдельности каждый угол

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

Что означают размер скругления углов CSS

Задание второго радиуса нужно задавать через слэш «/» в случае border-radius или вторым значением рядом в случае прямого указания каждого угла радиуса

Первый параметр отвечает за горизонтальный радиус, второй за вертикальный.

Например, с помощью этих свойств можно сделать эллипс:

Значения 100px 100px 100px 100px / 200px 200px 200px 200px можно было бы написать еще компактнее:

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

Задание толщины, цвета и типа линии при скруглении

Помимо значений закруглений можно также задавать толщину, цвет и тип линии скругления. Делаются все эти три параметра через свойство border:

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

Тип линии может принимать значения:

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

Таким образом можно красиво оформлять различные рамки для объявлений, замечаний на сайте.

Свечение для скругления

Помимо задания толщины, цвета и типа линии можно также задавать и свечении рамки. Делается это с помощью свойства box-shadow

Первые два параметра (0px 0px) задают сдвиг тени по горизонтали и вертикали соответственно. Следующие два параметра (4px 2px) задают силу свечения вокруг. Чтобы получилось красиво нужно делать одну цифру больше другой, а вообще надо экспериментировать. Последний параметр — цвет (#a0b).

Мы приводили всегда в качестве примеров тег . Но таким же образом можно скруглять и table, img, iframe. Чтобы скруглить края у этих элементов нужно всего лишь в стилях CSS элемента прописать border-radius .

Браузеры
Старые браузеры могут не поддерживать свойство border-radius . Так, IE ниже 9 версии, Firefox ниже 4 не отображают закругления. Необходимо прописывать вендорные префиксы CSS:

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

как скруглить углы картинки

Навигация по статье:

Как, например, здесь:

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

Круто, не правда ли?!
Всё это стало возможным благодаря CSS свойству border-radius.

Как закруглить углы для блока?

Предположим у вас на сайте есть блок с классом round-corner.

Для того чтобы этот блок было лучше видно я задам ему высоту, ширину и цвет фона при помощи CSS.

где 20рх – это радиус закругления угла (чем он больше – тем круглее угол)

И вот что мы получим в итоге:

Как закруглить углы картинки при помощи CSS?

2.17. CSS3-рамка

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

Закруглённые углы и рамки-изображения

Содержание:

1. Закругление углов с помощью border-radius

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

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

border-radius

Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса. Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip .

Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius можно закруглить каждый угол отдельно.

Если задать два значения для свойства border-radius , то первое значение закруглит верхний левый и нижний правый угол, а второе — верхний правый и нижний левый.

Значения, заданные через / , определяют горизонтальные и вертикальные радиусы. Свойство не наследуется.

border-radius (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius)
Значения:
длина	Позволяет закруглить углы блока с помощью значений единиц длины — px , em .
%	Значения, закругляющие углы, задаются в процентах от длины и ширины сторон элемента.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

border-radius border_r_2 Рис. 1. Примеры различных вариантов закругления углов блока

2. Рамки-изображения border-image

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

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42

Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным.

border-image
Значения:
краткая запись	Устанавливает рамку-изображение с помощью одного свойства, являющегося краткой записью свойств border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat . Значения свойств умолчанию: none 100% 1 0 stretch .
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

При помощи такого простого изображения можно получить вот такие рамки для элемента.

border_1 border_2
Рис. 2. Пример оформления границ блока с помощью изображения

Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30 ), задается с помощью значения свойства border-image-slice .

2.1. Ширина рамки-изображения border-image-width

Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 .

border-image-width
Значения:
длина	Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число	Числовое значение, на которое умножается значение border-width .
%	Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
auto	Соответствует значению border-image-slice .
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

border_image_width

Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений

2.2. Ресурс рамки-изображения border-image-source

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

border-image-source
Значения:
none	Отсутствие изображения для рамки. Значение по умолчанию.
url(url)	Относительный или абсолютный путь к изображению.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

2.3. Элементы рамки-изображения border-image-slice

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

border-image-slice
Значения:
число	Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений. Одно значение устанавливает границы одинакового размера для каждой стороны элемента. Два значения: первое определяет размер верхней и нижней границы, второе — правой и левой. Три значения: первое определяет размер верхней границы, второе — правой и левой, а третье — нижней границы. Четыре значения: определяет размеры верхней, правой, нижней и левой границы. Числовое значение представляет количество px .
%	Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.
fill	Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

border-image-slice

Рис. 4. Пример задания срезов рамки-изображения

2.4. Повтор рамки-изображения border-image-repeat

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

border-image-repeat
Значения:
stretch	Растягивает изображение на все пространство. Значение по умолчанию.
repeat	Повторяет заполняющую часть изображения, при этом видны места стыков с угловой частью, и если длины образца не хватает, то он растягивается.
round	Наиболее точно заполняет промежуток между углами рамки, дублируя заполняющую часть изображения, при этом может образовать стыки по середине стороны рамки.
space	Действует аналогично с repeat .
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

strech_repeat_round

Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений

2.5. Смещение рамки-изображения border-image-outset

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

border-image-outset
Значения:
длина	Отступ рамки-изображения задается с помощью любого положительного числа, указанного в px или em .
число	Числовое значение, на которое умножается border-width .
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение этого свойства от родительского элемента.

outset

Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений

3. Градиентная рамка

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

Полупрозрачная рамка

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

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

Как обновить windows 7 home basic до windows 10
Как обратиться ко всем элементам в css
Почему не работают медиа запросы css
Сколько сервоприводов можно подключить к arduino

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

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

док-раунд-ячейка-угол-1

Повторное использование чего угодно: Добавляйте наиболее часто используемые или сложные формулы, диаграммы и все остальное в избранное и быстро используйте их в будущем.
Более 20 текстовых функций: Извлечь число из текстовой строки; Извлечь или удалить часть текстов; Преобразование чисел и валют в английские слова.
Инструменты слияния : Несколько книг и листов в одну; Объединить несколько ячеек / строк / столбцов без потери данных; Объедините повторяющиеся строки и сумму.
Разделить инструменты : Разделение данных на несколько листов в зависимости от ценности; Из одной книги в несколько файлов Excel, PDF или CSV; От одного столбца к нескольким столбцам.
Вставить пропуск Скрытые / отфильтрованные строки; Подсчет и сумма по цвету фона ; Отправляйте персонализированные электронные письма нескольким получателям массово.
Суперфильтр: Создавайте расширенные схемы фильтров и применяйте их к любым листам; Сортировать по неделям, дням, периодичности и др .; Фильтр жирным шрифтом, формулы, комментарий .
Более 300 мощных функций; Работает с Office 2007-2019 и 365; Поддерживает все языки; Простое развертывание на вашем предприятии или в организации.

Круглые углы ячейки

Удивительный! Использование эффективных вкладок в Excel, таких как Chrome, Firefox и Safari!

Экономьте 50% своего времени и сокращайте тысячи щелчков мышью каждый день!

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

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

док-раунд-ячейка-угол-2

2. Затем нарисуйте фигуру, чтобы она соответствовала вашему размеру и положению.

док-раунд-ячейка-угол-3

3. Затем вы можете ввести содержимое ячейки, которое хотите отобразить в форме.

док-раунд-ячейка-угол-4

При необходимости вы можете отформатировать фигуру по своему усмотрению, щелкнув фигуру и выбрав Формат tab и указав нужный стиль.

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

Как закруглить углы у таблицы

Как закруглить углы у таблицы
Как сделать блоки в CSS
Как сделать закругленные углы в фотошопе

— редактор веб-страниц;
— приложение для создания изображений.

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

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

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

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

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

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

Округление чисел в Excel

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

Особенности округления чисел Excel

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

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

Округление с помощью кнопок на ленте

При нажатии на кнопку «Увеличить разрядность» количество внесенных знаков после запятой увеличивается на один.

Увеличить разрядность в Microsoft Excel

Кнопка «Уменьшить разрядность», соответственно, уменьшает на одну количество цифр после запятой.

Уменьшить разрядность в Microsoft Excel

Округление через формат ячеек

Есть возможность также выставить округление с помощью настроек формата ячеек. Для этого нужно выделить диапазон ячеек на листе, кликнуть правой кнопкой мыши и в появившемся меню выбрать пункт «Формат ячеек».

Переход в формат ячеек в Microsoft Excel

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

Формат ячеек в Microsoft Excel

Установка точности расчетов

Если в предыдущих случаях устанавливаемые параметры влияли только на внешнее отображения данных, а при расчетах использовались более точные показатели (до 15 знака), то сейчас мы расскажем, как изменить саму точность расчетов.

Переход в параметры в Microsoft Excel

Точноссть как на экране в Microsoft Excel

Применение функций

Если же вы хотите изменить величину округления при расчете относительно одной или нескольких ячеек, но не хотите понижать точность расчетов в целом для документа, в этом случае лучше всего воспользоваться возможностями, которые предоставляет функция «ОКРУГЛ» и различные ее вариации, а также некоторые другие функции.

Среди основных функций, которые регулируют округление, следует выделить такие:

Округление числа в Microsoft Excel

Округление до ближайшего кратного числа в Microsoft Excel

округление до четного числа в Microsoft Excel

Функцию можно вводить, как в ячейку, так и в строку функций, предварительно выделив ту ячейку, в которой она будет находиться. Перед каждой функцией следует ставить знак «=».

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

Округление через формулу в Microsoft Excel

Переход к выбору числа в Microsoft Excel

Возвращение к аргументам функции в Microsoft Excel

Переход к изменению разрядности в Microsoft Excel

Копирование формулы в Microsoft Excel

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

Мы рады, что смогли помочь Вам в решении проблемы.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.

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

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

В примере 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.

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.