Как сделать закругленную рамку

border-radius

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

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

• border-radius: 5px 10px 15px 20px; (4 значения)
  1. Верхний левый – 5px
  2. Верхний правый – 10px
  3. Нижний правый – 15px
  4. Нижний левый – 20px

• border-radius: 10px 20px 15px; (3 значения)
  1. Верхний левый – 10px
  2. Верхний правый и нижний левый – 20px
  3. Нижний-правый – 15px

• border-radius: 15px 5px; (2 значения)
  1. Верхний левый и нижний правый – 15px
  2. Верхний правый и нижний левый – 5px

• border-radius: 13px; (1 значение)
  1. Радиус для всех четырёх углов – 13px

Овальные скругления

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

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

border-radius: 50px / 30px;

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

Каждая из двух частей (до слэша и после него) подчиняется тем же правилам, что и при создании круглых скруглений. Это означает, что каждая часть может содержать от одного до четырёх значений, разделяемых между собой пробелами. И от количества заданных значений будет зависеть то, как будут установлены радиусы скругления углов. Например, четыре значения перед символом / представляют горизонтальные радиусы для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов. Значения после символа / соответственно представляют вертикальные радиусы для тех же самых углов.

Пример с овальными скруглениями:

• border-radius: 55px 45px 40px / 35px 20px;
  1. Верхний левый – 55px / 35px
  2. Верхний правый и нижний левый – 45px / 20px
  3. Нижний правый – 40px / 35px

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

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

Значение по умолчанию:	0
Применяется:	ко всем элементам, кроме элемента table, когда для него установлено border-collapse: collapse;
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.borderRadius=»5px»

Синтаксис

border-radius: [величина | проценты] [ / [величина | проценты] ]

Значения свойства

Значение	Описание
величина	Величина радиуса указывается в единицах измерения, используемых в CSS.
%	Величина радиуса, указанная в процентах, вычисляется в зависимости от общей ширины и высоты элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Скруглённые уголки

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

Как сделать блок со скруглёнными уголками через CSS3?

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

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

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

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

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

Как добавить скругленные уголки у фотографии фиксированного размера?

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

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

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

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

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

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

Вначале рисуем рамку в графическом редакторе (рис. 1). В нашем случае она имеет толщину два пиксела и серый цвет (#808080).

Рис. 1. Рамка на прозрачном фоне

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

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

Рис. 2. Изображения для публикации

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

Рис. 3. Увеличенное изображение уголков

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

Пример 1. Код для создания блока

В стилях к блоку добавляем рамку через свойство border , а вывод уголков делаем через универсальное свойство background . Рамка отображается вокруг блока, поэтому фоновый рисунок окажется внутри границы. Так что придется сдвигать фон на толщину линии через свойства top и left , предварительно установив относительное позиционирование (пример 2).

Пример 2. Добавление закруглений через один рисунок

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 4. Закругленные уголки у блока

Обратите внимание на следующие моменты. Сам рисунок с уголками в виде фона выводится только один раз и далее для определенных элементов меняет свою позицию через свойство background-position . Так как высота блока ограничена значением height , то увидеть весь рисунок целиком нельзя, поэтому мы видим нужный нам фрагмент. Для вложенных тегов сдвигать рисунок приходится с учетом смещения его родителя, поэтому в качестве значения left выступает удвоенная толщина границы.

Оформляем фотографии рамками в Фотошопе

В этом уроке по Adobe Photoshop мы научимся оформлять свои (и не только) изображения и фотографии с помощью различных рамок.

Создание рамок в Фотошопе

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

Вариант 1: Простая рамка в виде полоски

1. Открываем фотографию в Фотошопе и выделяем все изображение комбинацией CTRL+A. Затем идем в меню «Выделение» и выбираем пункт «Модификация – Граница».
2. Задаем необходимый размер для рамки.
3. Выбираем инструмент «Прямоугольная область».
4. Кликаем правой кнопкой мыши по выделению и выбираем «Выполнить обводку».
5. Настраиваем параметры.
6. Снимаем выделение (CTRL+D). Конечный результат:

Вариант 2: Закругленные углы

1. Для скругления углов фотографии выбираем инструмент «Прямоугольник со скругленными углами».
2. На верхней панели отмечаем пункт «Контур».
3. Задаем радиус скругления углов для прямоугольника.
4. Рисуем контур, жмем ПКМ и преобразуем его в выделение.
5. Значение для растушевки указываем «0». Результат:
6. Инвертируем область сочетанием CTRL+SHIFT+I, создаем новый слой и заливаем выделение любым цветом, по Вашему усмотрению.

Вариант 3: Рамка с рваными краями

1. Повторяем действия по созданию границы для первой рамки. Затем включаем режим быстрой маски (клавиша Q).
2. Далее переходим в меню «Фильтр – Штрихи – Аэрограф».
3. Настраиваем фильтр по своему усмотрению. Получится следующее:
4. Отключаем режим быстрой маски (клавиша Q) и заливаем получившееся выделение цветом, например, черным. Делать это лучше на новом слое. Снимаем выделение (CTRL+D).

Вариант 4: Рамка со ступенчатым переходом

1. Выбираем инструмент «Прямоугольная область» и рисуем рамку на нашей фотографии, а затем инвертируем выделение (CTRL+SHIFT+I).
2. Включаем режим быстрой маски (клавиша Q) и несколько раз применяем фильтр «Оформление – Фрагмент». Количество применений по Вашему усмотрению. Получим примерно следующее:
3. Выключаем быструю маску и заливаем выделение выбранным цветом на новом слое.

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