Css закруглить углы: Скруглённые уголки

Содержание

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

3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style. Для картинки это будет выглядеть так:

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

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

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

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

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

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

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

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

.borderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }

Но и это еще не всё: вместо простых круглых углов можно задавать эллиптическое скругление. Для этого понадобится указать два значения, разделенные косой чертой (для горизонтальной и вертикальной полуосей эллипса). Приведем пример на блоке размером 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 — создаем тени для элементов.

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

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

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

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

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

.radius-block{ border-radius: 25px; }

.radius-block{

border-radius: 25px;

}

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

Равномерное закругление

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

.radius-block2{ border-radius: 5px 15px 25px 35px; }

.radius-block2{

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

}

Разное закругление

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

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

.radius-block3{ border-radius: 5px 35px; }

.radius-block3{

border-radius: 5px 35px;

}

Симметричное закругление

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

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

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

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

.radius-block4{ border-radius: 60px/25px; }

.radius-block4{

border-radius: 60px/25px;

}

Необычное закругление

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

.radius-block5{ border-radius: 250px/75px; }

.radius-block5{

border-radius: 250px/75px;

}

Элипс

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

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

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

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

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

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

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

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

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

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

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

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

Узнать подробнее .mike { border-radius: 12px; border: 6px solid crimson; }

border: 6px solid crimson;

Пока нет проблем.

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

.mike { border-radius: 12px; border: 14px solid crimson; }

border: 14px solid crimson;

Рамка становится шире, а углы изображения – квадратными.

Почему так происходит?

Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.

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

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

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

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

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

.mike { border-radius: 26px; border: 14px solid crimson; }

border: 14px solid crimson;

При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.

Метод Box-shadow

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

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

.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; }

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; border-radius: $radius; }

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

Заключение

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

Автор: Guil Hernandez

Источник: http://blog.teamtreehouse.com/

Редакция: Команда webformyself.

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

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

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

Css рамка с закругленными углами. Как закруглить углы в CSS и HTML. Закругление углов картинок

CTRL+N, или выбрать функцию «Создать» (Create) в выпадающем из меню «Файл» списка. Далее из того же списка выберите операцию «Импорт» или вызовите ее комбинацией клавиш CTRL+I. Далее, укажите в диалоговом окне путь к файлу изображения, и нажмите кнопку «Импорт» (Import). Ваше отобразится на данном .

На панели инструментов найдите свиток «Редактор узлов» (Node Editor), в нем выберите инструмент «Форма» (Shape). Также этот инструмент можно вызвать нажатием клавиши F10.

Справа от угла, который вам нужно закруглить, щелкните левой кнопкой мыши по границе изображения. Появится новый узел у изображения, дополнительно к четырем угловым. Далее, выберите опцию «Преобразовать в кривую» (Convert Line To Curve) на панели «Редактора узлов». Слева от вновь созданного узла появятся метки закругления.

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

Очень простым способом (с привлечением векторного объекта) можно все углы у прямоугольного изображения. Не прибегая к вышеописанному способу редактирования узлов, нарисуйте рядом с импортированным изображением прямоугольник такого же размера инструментом «Прямоугольник» (Rectangle Tool) или вызовите инструмент клавишей F6.

Уже знакомым вам инструментом «Форма» щелкните по прямоугольнику и потяните мышкой за любой из его узлов к прямоугольника. Углы будут закруглены. Радиус закругления можно откорректировать тем же инструментом.
Отметьте свое изображение стрелочкой инструмента «Указатель» (Pick Tool).
Далее в списке главного меню найдите свиток «Эффекты» (Effects) и выберите опцию «PowerClip»и из выпадающего списка функцию «Поместить в контейнер» (Place Inside Container). Широкой стрелкой укажите на нарисованный вами прямоугольник с закругленными углами. Он станет рамкой, в которой разместится ваше изображение.

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

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

Правой кнопкой мыши нажмите на слое Background, выберите пункт Duplicate Layer и нажмите ОК (либо сочетание Ctrl+J). Затем создайте новый слой (Ctrl+Shift+N), поместите его между задним фоном и его копией как это показано на скриншоте (можно залить его каким-нибудь цветом, например белым). Заблокированный слой отключите (нажмите на «глаз» слева) или удалите.

В палитре инструментов найдите кнопку с прямоугольником (Rectangle Tool) и зажмите ее на левой кнопкой мыши. Появится дополнительное меню, где нужно (Rounded Rectangle Tool). Настройки в верхней части выставите такие же, как на скриншоте, а поле Radius измените по вкусу (чем больше, тем более круглые будут углы, и тем больше изображения обрежется.

Затем на фотографии выделите фрагмент, который вы хотите использовать (например, в качестве аватарки). Если вы ошиблись, нажмите клавишу Esc и повторите выделение. После того, как нужный фрагмент будет выделен, нажмите в него правой кнопкой мыши и выберите пункт Make Selection… и нажмите ОК.

Готово, вы получили слой с фотографией с закругленными углами. Теперь слой Layer 2 (тот, что служит задним фоном) можно залить любым цветом, либо оставить прозрачным.

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

Выберите для заднего фона (Layer 2) цвет, наиболее близкий к тому, что установлен на странице, куда вы размещаете фотографию. Затем сохраните файл в формате jpg.

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

BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

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

размером 200×200 пикселей:

BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; } .borderElement1 { background-color: #FFE8DB; border: 6px solid #FF5A00; border-radius: 15px 100px 15px 100px; }

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 поддерживается всеми современными версиями браузеров.

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

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

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

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

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

Border-radius: 10px;

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

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

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

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

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

Вот изображение без 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 { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

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

Img { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

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

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

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

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

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

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

Для закругления углов используется атрибут border-radius .

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

HTML-тег div выдаст нам прямоугольник в рамке с закругленным и углами :

а HTML-тег для выдачи текста будет выглядеть так:

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

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

1. Без текста

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

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

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

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

1. Левый верхний угол.

2. Правый верхний угол.

3. Правый нижний угол.

4. Левый нижний угол.

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

Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:

2. Закругление углов с помощью HTML кода без записи в файл стилей

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

HTML закругленные углы

Есть одна небольшая фишка, которая ещё больше упрощает весь процесс – это HTML закругленные углы . Она заключается в формировании HTML кода, в котором прописываются те же стили, что и в кодах CSS. При этом используются те же атрибуты, что и в блоке CSS и отпадает необходимость записи блока в файл Style.css. Одним словом – заменяем полностью кодом HTML код CSS.

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

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

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

Ещё хочу подарить Вам полезную информацию. Часто, используя картинки для оформления сайта , очень хочется сделать их ещё красивее, изменяя их форму, обрамляя рамкой красивого цвета и различной ширины. При этом возникает вопрос: “Как закруглить углы картинки ?”.

Это делается очень просто, и сейчас мы этому научимся.

Расположим картинку на сайте, сделав её фоном для самой себя в качестве фона тега div. Получаем такой код и картинку:

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

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

Используя первый способ данной статьи, коды картинок для файла стилей и тега div HTML-кода будут выглядеть следующим образом:

Обратите внимание, что часть атрибутов можно заносить в файл стилей, а часть в тег div. В нашем случае размеры картинки width и height вставлены в HTML-код.

Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:

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

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

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

Открываем в Фотошопе фотографию, которую собираемся редактировать.

Затем создаем копию слоя с водопадом под названием «Фон» . Для экономии времени воспользуемся горячими клавишами CTRL+J .

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

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

Я задам значение в 30 пикселей, так будет лучше видно результат.

Теперь нужно растянуть полученную фигуру на весь холст. Вызываем функцию «Свободное трансформирование» горячими клавишами CTRL+T . На фигуре появится рамка, при помощи которой можно перемещать, вращать и изменять размер объекта.

Нас интересует масштабирование. Растягиваем фигуру при помощи маркеров, указанных на скриншоте. После завершения масштабирования нажимаем ENTER .

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

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

Теперь слой с водопадом активен и готов к редактированию. Редактирование заключается в удалении лишнего из углов картинки.

Инвертируем выделение горячими клавишами CTRL+SHIFT+I . Теперь выделение осталось только на углах.

css — Как мне закруглить углы на странице входа в WordPress?

Я использую плагин Custom Login Page Customizer на своем сайте WordPress, и он сделал очень хорошую страницу плагина. С помощью CSS я могу закруглить углы своего логотипа, но не могу понять, как закруглить углы формы входа. Все остальное на сайте имеет закругленные углы. Следующий CSS — это то, что я пробовал, но он не работает. По какой-то причине в строку CSS в заголовке отображаемой страницы включается только строка спецификации границы, а border-radius пропускается. HTML создается настройками плагина. Я спросил об этом на их форуме поддержки 4 недели назад и не получил ответа. Я надеюсь, что кто-то здесь может мне помочь. Спасибо.

Css

/*--------------------------------------------------------------
7.1 Login form
--------------------------------------------------------------*/

.login #login form#loginform {
    border: 5px double #999 !important;
    border-radius: 16px !important;
}

#login ul.square {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    margin: 0 0 0 22px;
    padding: 0 0 0 22px;
    }

#login ul.square li {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    list-style: square outside !important;
    margin: 0 0 0 10px;
/*  padding: 1em 0 0.3em -1em !important; */
    padding: 3px 5px !important;
    }

#login p#backtoblog a:link {
    color: #2662ef;    /*  Bright blue  */
    background-color: transparent;
    font-size: 90%;
    font-weight: 400;
}

#login p#backtoblog a:hover, #login p#backtoblog a:focus {
    color:#ddff22;    /*  vivid yellow  */
    background-color: transparent;
    font-size: 90%;
    font-weight: 400;
}

#loginform {
    border-radius:16px;
}

#login .loginform {
    border-radius:16px;
}

Html

    <div>
        <h2><a href="https://botanical-art.baeecorp.org" title="Botanical Artists for Education &amp; the Environment (BAEE)" tabindex="-1">Botanical Artists for Education &amp; the Environment (BAEE)</a></h2>

<form name="loginform" action="https://botanical-art.baeecorp.org/wp-login.php" method="post">
    <p>
        <label for="user_login">Username or Email Address<br>
        <input name="log" value="" size="20" type="text"></label>
    </p>
    <p>
        <label for="user_pass">Password<br>
        <input name="pwd" value="" size="20" type="password"></label>
    </p>
        <p><label for="rememberme"><input name="rememberme" value="forever" type="checkbox"> Remember Me</label></p>
    <p>
        <input name="wp-submit" value="Log In" type="submit">
        <input name="redirect_to" value="https://botanical-art.baeecorp.org/wp-admin/" type="hidden">
        <input name="testcookie" value="1" type="hidden">
    </p>
</form>

Cynthia A Lockley 8 Авг 2017 в 13:17

3 ответа

Лучший ответ

Я обнаружил, что ответ на мой вопрос находится в настройках настройки для плагина Customizer Page Login Customizer. CSS для настройки плагина должен был быть вставлен в поле Custom CSS плагина, а не на панели CSS WordPress Additional. Я использовал дополнительную панель CSS в WordPress Customizer, чтобы попробовать несколько вещей, предложенных в ответах и комментариях на этот вопрос, но они не были решением. Я также установил дополнительный плагин, который делал много разных вещей, включая округление поля логина (но это было все, что мне было нужно). Я решил, что мне не нужен еще один толстый плагин, просто чтобы отредактировать плагин. Я удалил этот дополнительный плагин и изучил настройки плагина Custom Login Page Customizer и нашел ответ.

В настройщике WordPress перейдите в меню «Настройщик входа». В меню «Настройка входа» перейдите к пункту «Другое» в нижней части меню «Настройка входа». Этот другой пункт меню имеет поле для пользовательского CSS. Я удалил новый CSS-код, который вставил в панель «Дополнительные CSS-настройки» WordPress Customizer, и вставил его в поле «Пользовательский CSS» в меню «Другие» настройщика входа:

form#loginform, form#lostpasswordform, form#resetpassform, form#registerform {
    -moz-border-radius: 16px !important;
    -webkit-border-radius: 16px !important;
    -ms-border-radius: 16px !important;
    -o-border-radius: 16px !important;
    border-radius: 16px !important;
    padding: 20px;
    overflow: hidden;
}

dl.login-hello dt {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    font-size: 100%;
    font-weight: normal;
    margin: 0 0 0.4em 0;
}

dl.login-hello dd {
    color: #fefdff !important;  /*----Splashed white ----*/
    background-color: transparent;
    font-size: 98%;
    font-weight: normal;
}

dl dd:before {
    content: " \2014 "  ;
    font-style: oblique;
    margin: 0;
    padding: 0;
    }

После сохранения этого в пользовательском CSS в Настройщике входа форма входа имела закругленные углы.

Cynthia A Lockley 20 Авг 2017 в 06:50

Это потому, что вы не указали цвет фона раздела формы для входа. Вы можете попробовать это 🙂

#loginform {
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    background-color: red; /* specify the color which u want to gave in bg */
    padding: 20px;
}

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

#loginform {
-moz-border-radius: 16px!important;
-webkit-border-radius: 16px!important;
-ms-border-radius: 16px!important;
-o-border-radius: 16px!important;
border-radius: 16px!important;
background-color: red; //specify the color which u want to gave in bg
padding: 20px;

}

И если проблема не решена, предоставьте мне живой URL, который я сделаю.

Благодарность !!

Abhijeet 10 Авг 2017 в 12:03

Ты можешь использовать ,

form#loginform {
  border-radius: 16px;
}

Chinou 8 Авг 2017 в 11:00

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

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

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

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

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

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

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

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

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

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

</div>

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

.round-corner{ height:100px; width:200px; background:#2F73B6; }

.round-corner{

height:100px;

width:200px;

background:#2F73B6;

}

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

border-radius: 20px;

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

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

Например:

border-radius: 10%;

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

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

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

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

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

.content img { border-radius: 20px; }

.content img {

border-radius: 20px;

}

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

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

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

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

1.Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:
.round-corner{ border-radius: 20px; }
.round-corner{
border-radius: 20px;
}
Где вместо «round-corner» будет название класса элемента, для которого вы хотите закруглить углы, а вместо 20px будет ваше значение.
2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style
Выглядеть это будет так:
<style> .round-corner{ border-radius: 20px; } </style>
<style>
.round-corner{
border-radius: 20px;
}
</style>
3.Также CSS свойство для закругления углов можно приписать нужному элементу при помощи атрибута style. Для картинки это будет выглядеть так:
<img src=”images/pic.png” style=” border-radius: 20px;”
<img src=”images/pic.png” style=” border-radius: 20px;”

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

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

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

1.На первом месте – левый-верхний угол
2.На втором – правый верхний угол
3.На третьем – правый нижний угол
4.На четвёртом – левый нижний

Задавая разные значения можно получить следующие варианты закругления углов:

Для этого нужно прописать:

border-radius: 0 80% 0 80%;

border-radius: 90% 100% 0 100%;

border-radius: 100% 100% 0 0;

border-radius: 100% 25% 25% 100%;

border-radius: 100%/50%;

border-radius: 100%;

Как видите всё просто! Надеюсь, что у вас не возникнет проблем с созданием закруглённых углов при помощи CSS!

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

Если будут какие то вопросы – пишите их в комментариях. На этом сегодня всё! До встречи в следующих статьях 🙂

Закругление углов изображения на стилях CSS

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

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

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

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

Начнем для наглядности CSS3 чтобы блок DIV имел скругленные углы, ему необходимо придать стиль border-radius, где сразу предоставлен пример.

Код

border-radius: 5px;

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

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

Теперь добавляем стиль

Код

border-radius: 5px;

Чтоб немного украсить, добавляем красивую окантовку;

Код

border-radius: 7px;
border: 3px #00t solid;

Есть возможность прописать тени;

Код

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

Можете убрать обвод и просто закруглить углы и добавить теней;

Код

border-radius: 9px;
box-shadow: 0 0 9px #000;

И завершим самым интересным, это сделать картинку по всем 4 углам и они будут разными:

Код

border-radius: 0 489px;
border: 5px #cfc solid;
box-shadow: 0 0 7px #735;

Понимая как можно разнообразно все выстраивать, теперь вы можете свой портал разнообразить.

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

Как закруглить углы изображения на CSS без Фотошопа. Как закруглить углы в CSS и HTML

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

BorderElement { background-color: #EEDDFF; border: 6px solid #7922CC; border-radius: 25px; }

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

размером 200×200 пикселей:

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 поддерживается всеми современными версиями браузеров.

Доброго всем утра, дня, вечера или ночи. С вами снова и опять Дмитрий Костин. Как-то я просматривал разные картинки и тут мне приглянулись некторые из них. А приглянулись он тем, что у них были закруглены края. Сразу как-то интереснее смотрится. Вы не находите? И поэтому в сегодняшнем уроке я хотел бы вам рассказать, как закруглить углы в фотошопе, чтобы фото смотрелось поинтереснее.

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

Сглаживание с использованием границ

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

С помощью создания фигуры

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

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

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

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

Ну а на сегодня я свой урок заканчиваю. Не забудьте подписаться на новые статьи и поделитесь этим со своими друзьями. Рад был вам на моем блоге. Жду вас снова. Пока-пока.

С уважением, Дмитрий Костин

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

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

Для закругления углов используется атрибут border-radius .

HTML-тег div выдаст нам прямоугольник в рамке с закругленным и углами :

а HTML-тег для выдачи текста будет выглядеть так:

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

1. Без текста

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

1. Левый верхний угол.

2. Правый верхний угол.

3. Правый нижний угол.

4. Левый нижний угол.

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

Отсчет углов ведется по часовой стрелке, начиная с левого верхнего угла:

2. Закругление углов с помощью HTML кода без записи в файл стилей

HTML закругленные углы

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

Это делается очень просто, и сейчас мы этому научимся.

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

Код HTML второго способа без использования файла стилей, описанного в данной статье, имеет такой вид:

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

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

Border-radius: 10px;

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

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

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

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

Вот изображение без 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;

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

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

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

Alignnone { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

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

Img { border-radius: 10px; border: 5px #cfc solid; box-shadow: 0 0 10px #444; }

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

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

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

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

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

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Радиус

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

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

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

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

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Кнопка

Результат данного примера показан на рис. 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. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Изображения

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

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

Перед изучением закругления углов в css, рекомендую ознакомиться с предыдущими уроками по теме:
Границы css и отступы — margin и padding.

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

-webkit-border-radius	Для браузеров Chrome вплоть до 4.0, Safari до 5.0, iOS
-moz-border-radius	Firefox до 4.0

Самая большая проблема с border-radius возникает в IE (работает с 9 версии), в Opera – c 10.5.
border-radius указывают для каждой стороны границы:

свойство	значение радиус скругления
border-top-right-radius	верхнего правого угла
border-bottom-right-radius	нижнего правого угла
border-bottom-left-radius	нижнего левого
border-top-left-radius	верхнего левого
border-radius	универсальное

Значения border-radius:

пиксели,
проценты от ширины блока,
em,
значения могут быть заданы через слеш ( / ). Первое значение (до слеша) задает радиус для ширины, а второе — для высоты блока.

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>border-radius</title>
</head>
<body>
<style>
div {width: 84px;
padding: 5px;
background: #ffcecf;
border: 1px solid black;
border-radius: 15px;
}
</style>
<div>border radius

           </div>
           </body>
</html>

Результат:

Для того, чтобы этот код работал в старых вервиях Chrome и Firefox дублируем свойства, прописывая их с приставками -webkit и –moz:

border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;

Пример задания неравномерного закругления углов:

border-radius: 25px/5px;

Сокращенная запись border-radius: значения указываются через пробел или слеш. Возможно указание /*

одного значения – в этом случае правило распространяется на весь блок. Пример:
border-radius: 15px;
двух – первое число указывает радиус закругления для верхнего левого и нижнего правого, а второе – для верхнего правого и нижнего левого. Пример:
border-radius: 25px 5px;
трех – первое – для верхнего левого, второе – для верхнего правого и нижнего левого и третье – для нижнего правого:
border-radius:25px 5px 10px;
четырех – для каждого угла в отдельности, начиная с верхнего левого и далее по часовой стрелке. Схема:

Пример:
border-radius:25px 5px 10px 1px;

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

Опубликовано Иванова Наталья

Смотреть все записи от Иванова Наталья

Навигация по записям

Border-radius: создавайте закругленные углы с помощью CSS!

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

С тех пор, как свойство boder-radius впервые было объявлено в 2005 году, оно стало пользоваться широкой поддержкой браузеров (хотя и с некоторыми несоответствиями), и, благодаря относительной простоте использования, веб-разработчики быстро воспользовались этой новой технологией.

Вот простой пример:

Это поле должно иметь закругленные углы для Firefox, Safari / Chrome, Opera и IE9.

Теоретически код для этого примера довольно прост:

# example1 {
border-radius: 15px;
}

Однако на данный момент вам также необходимо использовать префикс -moz- для поддержки Firefox (дополнительные сведения см. В разделе поддержки браузера в этой статье):

# example1 {
-moz-border-radius: 15px;
border-radius: 15 пикселей;
}

Как это работает

Закругленные углы могут быть созданы независимо, используя четыре отдельных свойства border — * — radius (border-bottom-left-radius, border-top-left-radius и т. Д.) или для всех четырех углов одновременно с использованием сокращенного свойства border-radius.

Сначала мы разберемся с синтаксисом для отдельных свойств border — * — radius перед тем, как посмотрим, как работает сокращенное свойство border-radius.

граница-нижний-левый-радиус, граница-нижний-правый-радиус, граница-верхний-левый-радиус, граница-верх-правый-радиус

Каждое свойство границы — * — radius может принимать одно или два значения, выраженных как длина или процент (проценты относятся к соответствующим размерам рамки).

Синтаксис:

граница — * — * — радиус: [ <длина> | <%> ] [ <длина> | <%> ]?

Примеры:

граница-верх-левый-радиус: 10 пикселей 5 пикселей;
граница-нижний-правый-радиус: 10% 5%;
граница-верх-правый-радиус: 10 пикселей;

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

Если указано только одно значение, оно используется для одинакового определения как горизонтального, так и вертикального радиусов.

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

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

граница-радиус

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

Синтаксис:

[ <длина> | <процент> ] {1,4} [/ [ <длина> | <процент> ] {1,4}]?

Примеры:

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
радиус границы: 5 пикселей;
радиус границы: 5 пикселей 10 пикселей / 10 пикселей;

Первый набор (1–4) значений определяет горизонтальные радиусы для всех четырех углов. Необязательный второй набор значений, которому предшествует «/», определяет вертикальные радиусы для всех четырех углов.Если предоставляется только один набор значений, они используются для одинакового определения как вертикали, так и горизонтали.

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

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

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

В настоящее время Opera (версия 10.5 и более поздняя), Safari (начиная с версии 5) и Chrome (начиная с версии 5) поддерживают индивидуальные свойства border — * — radius и сокращенное свойство border-radius, как изначально определено в текущей спецификации W3C (хотя по-прежнему существуют нерешенные ошибки по таким вопросам, как переходы стиля границы, использование процентов для длин и т. д.).

Mozilla Firefox (версия 1.0 и выше) поддерживает border-radius с префиксом -moz-, хотя есть некоторые расхождения между реализацией Mozilla и текущей спецификацией W3C (см. Ниже).

Обновление: Последние ночные версии Firefox поддерживают border-radius без префикса -moz-.

Safari и Chrome (и другие браузеры на основе webkit) поддерживают border-radius с префиксом -webkit-, начиная с версии 3 (больше не требуется, начиная с версии 5), хотя опять же с некоторыми несоответствиями с текущей спецификацией (см. Эту статью для дальнейшего подробности о том, как более старые версии Webkit обрабатывают радиус границы).

Даже Microsoft пообещала и продемонстрировала в своем недавнем предварительном выпуске поддержку border-radius начиная с Internet Explorer 9 (без префикса).

Префикс -moz-

Браузер Mozilla Firefox поддерживает свойство border-radius с префиксом -moz- , начиная с версии 1.0. Однако только начиная с версии 3.5 браузер разрешил эллиптические углы, то есть принимал два значения для каждого угла для независимого определения горизонтального и вертикального радиусов. До версии 3.5 браузер принимал только одно значение для каждого угла, в результате чего углы имели равные горизонтальные и вертикальные радиусы.

Синтаксис из Firefox 3.5 и далее, по большей части соответствует текущей спецификации W3C, как описано в этой статье, с префиксом -moz-. Единственное существенное различие заключается в именовании отдельных свойств границы — * — radius, при этом свойства с префиксом -moz- следуют немного другому соглашению об именах, а именно:

Спецификация W3C	Реализация Mozilla
border-radius	-moz-граница-радиус
граница-верхний-левый-радиус	-moz-border-radius-topleft
граница-верхний-правый-радиус	-moz-border-radius-topright
граница-нижний-правый-радиус	-moz-border-radius-bottomright
граница-нижний-левый-радиус	-moz-border-radius-bottomleft

Реализация Mozilla также немного отличается от спецификации при указании процентов.Вы можете узнать больше о Центре разработчиков Mozilla здесь.

Примеры кроссбраузерности

Вот несколько основных примеров, которые должны работать в текущих версиях Firefox, Safari / Chrome, Opera и даже IE9:

#Example_A {
высота: 65 пикселей;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50 пикселей;
граница-нижний-правый-радиус: 50 пикселей;
}

#Example_B {
height: 65px;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 50px 25px;
граница-нижний-правый-радиус: 50 пикселей 25 пикселей;
}

#Example_C {
height: 65px;
ширина: 160 пикселей;
-moz-border-radius-bottomright: 25px 50px;
граница-нижний-правый-радиус: 25 пикселей 50 пикселей;
}

#Example_D {
height: 5em;
ширина: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
ширина: 160 пикселей;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
ширина: 70 пикселей;
-moz-border-radius: 35 пикселей;
радиус границы: 35 пикселей;
}

Дополнительные примечания и дополнительная литература

Спецификация фона и границ W3C подробно описывает форму угла (особенно в случаях, когда две смежные границы имеют разную ширину), влияние радиуса границы на фоновые изображения, переходы цветов и стилей, а также то, что происходит, когда кривые перекрываются. и влияние border-radius на таблицы.

Это лучше всего объясняется в следующих разделах спецификации:

Легкие закругленные углы с радиусом границы

Царство CSS — это царство ящиков. Все на странице — это коробка, внутри коробки, внутри коробки. Неудивительно, что начинающие разработчики CSS (или, в моем случае, плохие графические дизайнеры со слишком большим опытом работы с CSS) так часто создают квадратные макеты!

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

И что еще лучше, некоторые браузеры уже поддерживают закругленные углы! Пока я пишу это, вы в значительной степени ограничены Mozilla / Firefox и Safari 3. Однако этот список обязательно будет расти со временем, поэтому не помешает начать экспериментировать с этой функцией. Особенно с учетом того, что в браузерах, которые не поддерживают закругленные углы, ничего плохого не происходит — пользователь видит только правильные квадратные углы.

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

 div.ounded {
цвет фона: # 666;
цвет: #fff;
font-weight: жирный;
отступ: 10 пикселей;
-moz-border-radius: 5 пикселей;
-webkit-border-radius: 5 пикселей; }

И это правило создаст div, который выглядит так:

Здесь следует отметить два свойства: «-moz-border-radius» и «-webkit-border-radius.Первый способ заключается в том, как указать радиус — количество пикселей от гипотетической центральной точки до края круга, созданного закругленным углом (см. Изображение ниже) — в браузерах на основе Mozilla. Последний делает то же самое, но для Safari.

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

 blockquote {
маржа: 1em 20px;
отступ: 10 пикселей;
граница: 2px solid # 555;
цвет фона: # f2f2f2;
цвет: # 555;
размер шрифта: 140%;
выравнивание текста: выравнивание;
-moz-border-radius: 10 пикселей;
-webkit-border-radius: 10 пикселей; }

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

И, наконец, вы не ограничены ни скругленными углами, ни ни одним из них.Используя это свойство, вы можете указать, какие углы вы хотите скруглить в вашем CSS. Однако важно отметить, что версия этого правила для Firefox немного отличается от стандарта W3C, то есть написано немного иначе, чем правило для Safari. Например, рассмотрим эти два правила, которые используются для закругления верхнего левого угла поля:

 -moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5 пикселей;

Это небольшая разница, по большому счету, но очень важная, если вы хотите, чтобы ваши закругленные углы отображались там, где и как должны! Используя возможность закруглять отдельные углы, вы можете создавать необычные предупреждающие сообщения:

.тревога {
граница: 2px solid # fc0;
отступ: 8px 10px;
размер шрифта: 120%;
цвет: # c90;
font-weight: жирный;
цвет фона: # ff9;
-moz-border-radius-topleft: 8 пикселей;
-webkit-border-top-left-radius: 8 пикселей;
-moz-border-radius-bottomright: 8 пикселей;
-webkit-border-bottom-right-radius: 8px; }

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

 .comment {
граница: 1px solid # 999;
цвет фона: # d8d8f4;
маржа: 1em 40px;
отступ: 15 пикселей;
-moz-border-radius-topleft: 15 пикселей;
-webkit-border-top-left-radius: 15 пикселей;
-moz-border-radius-topright: 15 пикселей;
-webkit-border-top-right-radius: 8 пикселей;
-moz-border-radius-bottomleft: 15 пикселей;
-webkit-border-bottom-left-radius: 15 пикселей; }

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

CSS свойство border-radius — javatpoint

Это свойство CSS устанавливает скругленные границы и предоставляет скругленные углы вокруг элемента, тегов или div. Он определяет радиус углов элемента.

Это сокращение для border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius .Придает округлую форму углам границы элемента. Мы можем указать границу для всех четырех углов поля в одном объявлении, используя border-radius. Значения этого свойства могут быть определены в процентах или единицах длины.

Это свойство CSS включает свойства, которые представлены в следующей таблице:

Имущество	Описание
граница, верхний левый радиус	Используется для установки радиуса границы для верхнего левого угла
граница верхний правый радиус	Используется для установки радиуса границы для верхнего правого угла
граница, нижняя правая, радиус	Используется для установки радиуса границы для нижнего правого угла
край-нижний левый-радиус	Используется для установки радиуса границы для нижнего левого угла

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

Давайте посмотрим, что произойдет, когда мы предоставим этому свойству одно значение, два значения, три значения и четыре значения.

Если мы предоставим этому свойству одно значение (, например, border-radius: 30px;) , оно установит для всех углов одинаковое значение.
Когда мы указываем два значения (, например, border-radius: 20% 10%;) , тогда первое значение будет использоваться для верхнего левого и нижнего правого углов, а второе значение будет использоваться для верхний правый и нижний левый углы.
Когда мы используем три значения (, например, border-radius: 10% 30% 20%;) , тогда первое значение будет использоваться для верхнего левого угла, второе значение будет применяться в верхнем правом углу, и нижний левый угол, а третье значение будет применено к нижнему правому углу.
Точно так же, когда это свойство имеет четыре значения (border-radius: 10% 30% 20% 40%;) , тогда первое значение будет радиусом верхнего левого угла, второе значение будет использоваться для верхнего правого угла. , третье значение будет применяться в правом нижнем углу, а четвертое значение — в нижнем левом углу.

Синтаксис

border-radius: длина 1-4 | % / 1-4 длины | % | наследовать | исходный;

Стоимость объекта

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

в процентах: Обозначает размер радиуса в процентах. Также не допускаются отрицательные значения.

Пример

Радиус границы CSS <стиль> div { отступ: 50 пикселей; маржа: 20 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; плыть налево; высота: 150 пикселей; } п{ размер шрифта: 25 пикселей; } #один { радиус границы: 90 пикселей; фон: светло-зеленый; } #два { радиус границы: 25% 10%; фон: оранжевый; } #три { радиус границы: 35px 10em 10%; фон: голубой; } #four { радиус границы: 50px 50% 50cm 50em; фон: светло-голубой; }

Добро пожаловать в javaTpoint.com

радиус границы: 90 пикселей;

Добро пожаловать на javaTpoint.com

радиус границы: 25% 10%;

Добро пожаловать на javaTpoint.com

border-radius: 35px 10em 10%;

Добро пожаловать на сайт javaTpoint.com

border-radius: 50px 50% 50cm 50em;

Выход

Проверить это сейчас

Теперь давайте посмотрим на border-radius для определенных углов.

Пример — граница-верх-левый-радиус

Устанавливает радиус границы для верхнего левого угла.

Радиус границы CSS <стиль> #левый { граница-верх-левый-радиус: 250 пикселей; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

Добро пожаловать в javaTpoint.com

граница-верх-левый-радиус: 250 пикселей;

Выход

Проверить это сейчас

Пример — граница-верх-правый-радиус

Устанавливает радиус границы для верхнего правого угла.

<стиль> #левый { граница-верх-правый-радиус: 50%; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

Добро пожаловать в javaTpoint.com

граница-верх-правый-радиус: 50%;

Выход

Проверить это сейчас

Пример — граница-нижний-правый-радиус

Устанавливает радиус границы для нижнего правого угла.

<стиль> #левый { граница-нижний-правый-радиус: 50%; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

Добро пожаловать в javaTpoint.com

граница-нижний-правый-радиус: 50%;

Выход

Проверить это сейчас

Пример — граница-нижний-левый-радиус

Устанавливает радиус границы для нижнего левого угла.

<стиль> #левый { граница-нижний-левый-радиус: 50%; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

Добро пожаловать в javaTpoint.com

граница-нижний-левый-радиус: 50%;

Выход

Проверить это сейчас

Мы можем указать отдельные значения по горизонтали, и по вертикали, , используя символ косой черты (/). Значения перед косой чертой (/) используются для горизонтального радиуса, а значения после косой черты (/) — для вертикального радиуса.

Ниже приведен пример с использованием символа косой черты (/).

Пример

<стиль> div { отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; маржа: 20 пикселей; font-weight: жирный; высота: 175 пикселей; плыть налево; размер шрифта: 25 пикселей; } #один { радиус границы: 10% / 50%; фон: светло-зеленый; } #два { радиус границы: 120 пикселей / 100 пикселей 10 пикселей; фон: светло-голубой; } #три { радиус границы: 50% 10em / 10% 20em; фон: светло-розовый; } #four { радиус границы: 100px 10em 120px / 30%; фон: голубой; } <центр>

Добро пожаловать в javaTpoint.com

радиус границы: 10% / 50%;

Добро пожаловать на сайт javaTpoint.com

радиус границы: 120 пикселей / 100 пикселей 10 пикселей;

Добро пожаловать на сайт javaTpoint.com

border-radius: 50% 10em / 10% 20em;

Добро пожаловать на сайт javaTpoint.com

border-radius: 100px 10em 120px / 30%;

Выход

Проверить это сейчас

Как использовать свойство радиуса границы CSS3

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

 . Закругленные углы {
    радиус границы: 20 пикселей;
  }

  .круг {
    радиус границы: 50%;
  }

Примечание: Свойство border-radius фактически является сокращенным свойством для border-top-left-radius , border-top-right-radius , border-bottom-right -radius и border-bottom-left-radius properties.

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

  .new-shape {
  радиус границы: 20 пикселей 50 пикселей 5 пикселей 0; / * вверху слева, вверху справа, внизу справа, внизу слева * /
}

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

  .leaf-shape {
  радиус границы: 0 50%;
}

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

  .odd-shape {
  радиус границы: 0 20 пикселей 50%;
}

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

  .elliptical-1 {
  радиус границы: 50 пикселей / 10 пикселей; / * горизонтальный радиус / вертикальный радиус * /
}
.elliptical-2 {
  радиус границы: 10 пикселей / 50 пикселей;
}

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

  .elliptical-3 {
  радиус границы: 50 пикселей 20 пикселей 50 пикселей 20 пикселей / 20 пикселей 50 пикселей 20 пикселей 50 пикселей; / * горизонтальный верхний левый, горизонтальный верхний правый, горизонтальный нижний правый, горизонтальный нижний левый / вертикальный верхний левый, вертикальный верхний правый, вертикальный нижний правый, вертикальный нижний левый * /
}

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

  .elliptical-4 {
  граница-верх-левый-радиус: 50 пикселей 20 пикселей; / * горизонтальный радиус, вертикальный радиус * /
  граница-верх-правый-радиус: 20 пикселей 50 пикселей;
  граница-нижний-правый-радиус: 50 пикселей 20 пикселей;
  граница-нижний-левый-радиус: 20 пикселей 50 пикселей;
}

Дополнительная информация о свойстве CSS border radius:

CSS Border-Radius Может это сделать?

Как создавать очень крутые эффекты с помощью редко используемой функции.

TL / DR : Когда вы используете восемь значений, определяющих радиус границы в CSS, вы можете создавать органично выглядящие формы. ВОТ ЭТО ДА. Нет времени все это читать? — мы сделали для вас наглядный инструмент. Найдите здесь.

Введение

Во время конференции Frontend Conference в Цюрихе в этом году Рэйчел Эндрю рассказала о , раскрывающем возможности CSS Grid Layout . В конце своего выступления она упомянула кое-что о старом свойстве CSS, которое застряло у меня в голове:

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

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

Освоение border-radius

Одно значение

Начнем с основ. Надеюсь, это вас не утомит. Вы, вероятно, знакомы с CSS, и вы также знаете радиус границы.Он существует уже несколько лет, в основном используется с одним значением вроде этого: border-radius: 1em и, возможно, был одной из самых обсуждаемых / любимых функций CSS3 еще в 2010 году, когда css3please.com был вашим лучшим другом.

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

Как вы можете видеть в приведенном выше примере, рядом со значениями фиксированной длины, такими как пикселей , rem или em , вы также можете использовать проценты. Они в основном используются для создания круга путем установки радиуса границы на 50%.Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его на прямоугольнике, у вас больше не будет симметричных углов. Вот пример, показывающий разницу между радиусом границы : 110 пикселей, и радиусом границы : 30%, применительно к прямоугольнику.

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

Четыре разных значения

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

Восемь значений, разделенных косой чертой (вот что интересно)

Я думаю, что большинство из вас уже сделали все, что я объяснил выше. Теперь мы переходим к захватывающей части. Что произойдет, если вы разделите значения косой чертой и укажете до восьми значений? Давайте посмотрим, что об этом говорится в спецификации:

«Если значения указаны до и после косой черты, то значения перед косой чертой задают горизонтальный радиус, а значения после косой черты задают вертикальный радиус.Если косой черты нет, значения устанавливают оба радиуса одинаково ». W3C

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

Итак, когда вы сравниваете border-radius: 4em 8em и border-radius: 4em / 8em , результаты сильно отличаются.

Симметричные углы слева образуют четверть круга, а асимметричные углы справа — часть многоточия.

Формы, которые вы получаете с этим, выглядят немного странно, если честно. Но помните круги, которые вы создаете с радиусом границы : 50% . Вы получаете круг, потому что оба значения, определяющие одну сторону, в сумме составляют 100% (50% + 50% = 100%), и не остается прямой линии, которая напоминает вам исходный квадрат. Если вы примените ту же логику к полному синтаксису радиуса границы с восемью значениями, вы можете создать фигуру, которая немного похожа на плектр или органическую ячейку:

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

Не паникуйте… мы сделали для вас визуальный генератор

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

НЕОБХОДИМЫЙ РАДИУС ГРАНИЦ

Не пересекать потоки

Теперь, когда вы знаете о 8 значениях в целом, вам может быть немного грустно, потому что наш инструмент радиуса границы не дает у вас есть возможность установить каждое значение отдельно… Подождите, это версия 8-POINT-FULL-CONTROL .

Если вы достаточно взрослые, возможно, вы помните эту цитату из фильма «Охотники за привидениями» 1984-х годов:

«Не переходи потоки». — «Почему?» — «Было бы плохо».

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

шт. : Большое спасибо simurai. Еще в 2010 году он создал несколько кнопок CSS3 BonBon.Несмотря на то, что они выглядят немного устаревшими, это единственное место, с которым я когда-либо сталкивался и узнал о синтаксисе косой черты.

Посмотрите на эту замечательную функцию в действии.

Фото gratisography.com

закругленных углов CSS для элементов HTML — POFTUT

CSS предоставляет атрибут border-radius для определения, формы, скругления углов элементов HTML. Этот атрибут был создан в 2005 году и получил широкое распространение среди веб-разработчиков, что позволяет легко стилизовать различные элементы.

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

Мы начнем с примера с одним значением, где указанное значение будет применено ко всем четырем углам. В этом примере мы применим радиус границы как 15 пикселей с 15 пикселей, как показано ниже.

 


<стиль>
# radius1 {
радиус границы: 15 пикселей;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}

# radius2 {
радиус границы: 25 пикселей;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}

# radius3 {
радиус границы: 45 пикселей;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}






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


 Одно значение - border-radius: 15px: 
 

 Одно значение - border-radius: 25px: 
 

 Одно значение - border-radius: 45px:

Раунд с одним значением

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

 


<стиль>
# radius1 {
радиус границы: 15 пикселей 30 пикселей;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}

# radius2 {
радиус границы: 25 пикселей 50 пикселей;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}

# radius3 {
радиус границы: 45 пикселей 90 пикселей;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}






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


 Два значения - border-radius: 15px 30px: 
 

 Два значения - border-radius: 25px 50px: 
 

 Два значения - border-radius: 45px 90px:

Раунд с двумя значениями

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

<стиль> # radius1 { радиус границы: 15 пикселей 30 пикселей 45 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius2 { радиус границы: 25 пикселей 50 пикселей 75 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius3 { радиус границы: 45 пикселей 90 пикселей 135 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; }

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

Два значения - border-radius: 15px 30px 45px:

Два значения - border-radius: 25px 50px 75px:

Два значения - border-radius: 45px 90px 135px:

Раунд с тремя значениями

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

<стиль> # radius1 { радиус границы: 15 пикселей 30 пикселей 45 пикселей 60 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius2 { радиус границы: 25 пикселей 50 пикселей 75 пикселей 100 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius3 { радиус границы: 45 пикселей 90 пикселей 135 пикселей 180 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; }

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

Два значения - border-radius: 15px 30px 45px 60px:

Два значения - border-radius: 25px 50px 75px 100px:

Два значения - border-radius: 45px 90px 135px 180px:

Раунд с четырьмя значениями

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

 15 пикселей

30 пикселей

150 пикселей

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

 


<стиль>
# radius1 {
радиус границы: 20%;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}

# radius2 {
радиус границы: 30%;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}

# radius3 {
радиус границы: 50%;
фон: # 73AD21;
отступ: 20 пикселей;
ширина: 200 пикселей;
высота: 150 пикселей;
}






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


 Два значения - border-radius: 20% в процентах 
 

 Два значения - радиус границы: 30% Процент: 
 

 Два значения - радиус границы: 50% Процент:

Раунд с процентным значением

Мы также можем указать угол, который мы хотим скруглить.Если мы хотим закруглить верхний левый угол, мы можем использовать атрибут CSS border-top-left-radius , как показано ниже.

<стиль> # radius1 { граница-верх-левый-радиус: 30 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius2 { граница-верх-левый-радиус: 60 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius3 { граница-верх-левый-радиус: 120 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; }

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

Граница в верхнем левом углу, радиус 30 пикселей

Граница в верхнем левом углу, радиус 60 пикселей

Граница в верхнем левом углу, радиус 120 пикселей

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

Если мы хотим закруглить верхний правый угол, мы можем использовать атрибут CSS border-top-right-radius , как показано ниже.

<стиль> # radius1 { граница-верх-правый-радиус: 30 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius2 { граница-верх-правый-радиус: 60 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius3 { граница-верх-правый-радиус: 120 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; }

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

Граница в правом верхнем углу, радиус 30 пикселей

Граница в правом верхнем углу, радиус 60 пикселей

Граница в правом верхнем углу, радиус 120 пикселей

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

Если мы хотим закруглить нижний левый угол, мы можем использовать атрибут CSS border-bottom-left-radius , как показано ниже.

<стиль> # radius1 { граница-нижний-левый-радиус: 30 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius2 { граница-нижний-левый-радиус: 60 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius3 { граница-нижний-левый-радиус: 120 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; }

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

Граница внизу слева, радиус 30 пикселей

Граница внизу слева, радиус 60 пикселей

Граница нижнего левого радиуса 120 пикселей

Круглый нижний левый угол

Если мы хотим закруглить нижний правый угол, мы можем использовать атрибут CSS border-bottom-right-radius , как показано ниже.

<стиль> # radius1 { граница-нижний-правый-радиус: 30 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius2 { граница-нижний-правый-радиус: 60 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; } # radius3 { граница-нижний-правый-радиус: 120 пикселей; фон: # 73AD21; отступ: 20 пикселей; ширина: 200 пикселей; высота: 150 пикселей; }

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

Граница нижнего правого края, радиус 30 пикселей

Граница нижнего правого края, радиус 60 пикселей

Нижний правый край границы, радиус 120 пикселей

Закругленный нижний правый угол

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

Хиро Нишимура: [0:00] Создайте класс для эффекта границы.Я назвал свой эффект. У меня есть изображение в моем index.html. Теперь давайте установим границу для этого изображения. Мы дадим ему сплошную желтую рамку с шириной границы 10 пикселей. Давайте обновим страницу и увидим нашу новую границу изображения.

[0:17] Мы будем использовать свойство border-radius, чтобы сделать углы этого изображения более округлыми. Здесь вы можете использовать пиксели или проценты. Мы будем использовать проценты. Установим 50%. Давайте обновим.

[0:27] Вы можете установить радиус для всех четырех углов вместе с одним процентом, как я сделал здесь, или вы можете установить радиус каждого угла отдельно.Значения border-radius идут сверху слева, сверху справа, снизу справа и снизу слева. Чем выше процент радиуса, тем больше закругляется граница. Давайте попробуем 5%, 10%, 30% и 85%. Давайте обновим.

[0:51] Теперь давайте добавим эффект наведения указателя мыши с псевдоклассом наведения. На данный момент мы сохраним стиль, цвет и ширину границы такими же, но изменим радиус границы. Установим два значения радиуса: 25% и 50%.

[1:07] Когда мы обновляем, радиус границы изменится при наведении курсора мыши.Если вы установите два значения радиуса, первый радиус будет применяться к верхнему левому и нижнему правому краям. Второй радиус будет применяться к верхнему правому и нижнему левому углам.

[1:20] Мы создали границы для элемента и установили округлость границы с помощью свойства border-radius. Чем выше процентное значение, которое вы устанавливаете для радиуса, тем более округлый угол границы.

[1:30] Вы можете установить радиус каждого угла отдельно, попарно или вместе. Если вы установите только один радиус, все четыре угла будут иметь одинаковую округлость.Если вы установите два значения радиуса, первый радиус будет применяться к верхнему левому и нижнему правому углам, а второй радиус будет применяться к верхнему правому и нижнему левому углам.

[1:49] Когда вы устанавливаете их все по отдельности, радиус границы идет от верхнего левого угла к верхнему правому, нижнему правому и нижнему левому.

Css закруглить углы: Скруглённые уголки | htmlbook.ru

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

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

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

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

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

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

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

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

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

Почему так происходит?

Метод Box-shadow

Применение переменных Sass

Заключение

Css рамка с закругленными углами. Как закруглить углы в CSS и HTML. Закругление углов картинок

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

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

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

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

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

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

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

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

2. Закругление углов с помощью HTML кода без записи в файл стилей

HTML закругленные углы

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

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

css — Как мне закруглить углы на странице входа в WordPress?

3 ответа

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

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

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

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

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

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

Закругление углов изображения на стилях CSS

Как закруглить углы изображения на CSS без Фотошопа. Как закруглить углы в CSS и HTML

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

Сглаживание с использованием границ

С помощью создания фигуры

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

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

2. Закругление углов с помощью HTML кода без записи в файл стилей

HTML закругленные углы

3. Картинки с закругленными углами. Рамка вокруг картинки HTML

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

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

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

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

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

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

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

Навигация по записям

Border-radius: создавайте закругленные углы с помощью CSS!

Border-radius: создавайте закругленные углы с помощью CSS!

Как это работает

граница-нижний-левый-радиус, граница-нижний-правый-радиус, граница-верхний-левый-радиус, граница-верх-правый-радиус

Синтаксис:

Примеры:

граница-радиус

Синтаксис:

Примеры:

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

Префикс -moz-

Примеры кроссбраузерности

Дополнительные примечания и дополнительная литература

Легкие закругленные углы с радиусом границы

CSS свойство border-radius — javatpoint

Синтаксис

Стоимость объекта

Пример

Добро пожаловать в javaTpoint.com

Добро пожаловать на javaTpoint.com

Добро пожаловать на javaTpoint.com

Добро пожаловать на сайт javaTpoint.com

Пример — граница-верх-левый-радиус

Добро пожаловать в javaTpoint.com

Пример — граница-верх-правый-радиус

Добро пожаловать в javaTpoint.com

Пример — граница-нижний-правый-радиус