Углы css круглые: Скруглённые уголки | htmlbook.ru

Разное 

Содержание

border-radius | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+10.5+3.0+1.0+2.1+1.0+

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

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

Версии CSS

Описание

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

Синтаксис

border-radius: <радиус>{1,4} [ / <радиус>{1,4}]

Значения

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

Табл. 1. Зависимость от числа значений
Число значенийРезультат
1Радиус указывается для всех четырех уголков.
2Первое значение задает радиус верхнего левого и нижнего правого уголка, второе значение — верхнего правого и нижнего левого уголка.
3Первое значение задает радиус для верхнего левого уголка, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого уголка.
4По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого уголка.

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

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

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
   .radius {
    background: #f0f0f0; /* Цвет фона */
    border: 1px solid black; /* Параметры рамки */
    padding: 15px; /* Поля вокруг текста */
    margin-bottom: 10px; /* Отступ снизу */
   }
  </style>
 </head> 
 <body> 
  <div>
   border-radius: 50px 0 0 50px;
  </div>
  <div>
   border-radius: 40px 10px;
  </div>
  <div>
   border-radius: 13em/3em;
  </div>
  <div>
   border-radius: 13em 0.5em/1em 0.5em;
  </div>
  <div>
   border-radius: 8px;
  </div>
 </body> 
</html>

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

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

Браузеры

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

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

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

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

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

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

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

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

P { border: solid thick red;
    border-radius: 1em }

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

P { box-shadow: black 0. 5em 0.5em 0.3em }

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

Результат

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

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

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

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

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

CSS Закругленные Угловые Дивы — CodeRoad



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

css rounded-corners
Поделиться Источник Moon     13 декабря 2010 в 17:47

4 ответа

  • Как создать фон css div/закругленные углы?

    Как я могу создать следующий стиль html/css (закругленные углы, основной цвет фона), выделенный красным прямоугольником:

  • Закругленные Кривые Вкладки | Css

    Привет, я пытаюсь иметь закругленные угловые вкладки в CSS, которые должны поддерживаться во всех браузерах. . Вот ссылка, которую я пробовал .. http://learneveryday.net/demo/css/menu/tabmenu1 / Все работает ok..but закругленные углы не наступают.. Вот код HTML для этого.. <ul id=navtabs>…

Поделиться idlefingers     13 декабря 2010 в 17:49


4

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

http://borderradius.com/

Удачи!

Ну, чтобы ответить на ваш вопрос (кроме инструмента):

Один угол (верхний левый):

-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;

Два угла (верхний левый и правый):

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;

Три угла (верхний левый и правый и нижний правый)

-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px;
border-bottom-left-radius: 0;

И так далее. ..

Все радиусом 10px, очень легко сделать с помощью инструмента, который я рекомендую.

BTW: не пропустите ответ idlefingers, очень хороший ресурс!!

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

Поделиться Trufa     13 декабря 2010 в 17:50


0

использование border-radius

border-radius:5px;

дополнительная ссылка

Поделиться Sumit patel     10 августа 2016 в 13:16

  • CSS: закругленные поля ввода текста

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

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

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


-1

Ни один из других ответов не работает с IE8, поэтому вот ссылка со многими

возможными решениями:

DevWebPro

Поделиться egrunin     13 декабря 2010 в 17:59

Похожие вопросы:


CSS закругленные углы в IE

Возможный Дубликат : Можете ли вы сделать CSS закругленных углов в IE без использования изображений? Как я могу получить закругленные углы в CSS с IE? У меня есть это прямо сейчас……


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

Мне нужен способ нарисовать закругленные приподнятые и впалые угловые края на пользовательском элементе управления. В настоящее время я использую ControlPaint.

DrawBorder3D, но, конечно, углы…


Закругленные угловые столы с LESS

После некоторого копания в SO я нашел это лучшим ответом на мою потребность иметь закругленные углы для столов. Что привело меня к следующему фрагменту CSS: .greytable tr:first-child th:first-child…


Как создать фон css div/закругленные углы?

Как я могу создать следующий стиль html/css (закругленные углы, основной цвет фона), выделенный красным прямоугольником:


Закругленные Кривые Вкладки | Css

Привет, я пытаюсь иметь закругленные угловые вкладки в CSS, которые должны поддерживаться во всех браузерах.. Вот ссылка, которую я пробовал .. http://learneveryday.net/demo/css/menu/tabmenu1 / Все…


CSS: закругленные поля ввода текста

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


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

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


CSS границы с bezier кривыми

Мы все знаем, что можно иметь закругленные углы в простом CSS, используя свойство border-radius . Можно ли также иметь произвольные угловые формы, в частности, используя cubic-bezier ?


Как сделать закругленные угловые бары в google charts

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


Угловые линии на заднем плане CSS

Я хочу создать такой дизайн: Как я могу создать эти угловые линии уровней? Прямо сейчас я проектирую с помощью css/sass и Bootstrap. Моя отправная точка такова: http:/ / demo.themefisher.com /…

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

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

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

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

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

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

<div>Здесь будет какой-то контент</div>

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

.info-box {
   -webkit-border-radius: 20px;
   border-radius: 20px;
  background-color: #000000;
{

Примечания:

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

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

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

.info-box {
   -webkit-border-radius: 20px 60px 40px 30px;
   border-radius: 20px 60px 40px 30px;
  background-color: #000000;
{

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

Допустим, что у вас в HTML-разметке есть квадратное изображение, которое имеет класс «bio-pic«. Вы можете сделать это изображение круглым с помощью следующего CSS-кода:

img.bio-pic {
   -webkit-border-radius: 50%;
   border-radius: 50%;
{

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

Данная публикация является переводом статьи «Rounded Corners with CSS3 Border Radius» , подготовленная редакцией проекта.

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

Одинаковый радиус для всех углов

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

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


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

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


HTML

<div>
  &nbsp;
</div>



CSS

.box{
    width: 150px;
    height: 150px;	
    border: 3px solid #444;
    background-color: #fC0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

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

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


-webkit-border-radius: 40px  20px;
-moz-border-radius: 40px  20px;
border-radius: 40px  20px;

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

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


HTML

<div>
  &nbsp;
</div>



CSS

. box{
    width: 150px;
    height: 150px;
    border: 3px solid #444;	
    background-color: #fC0;
    -webkit-border-radius: 40px 20px;
    -moz-border-radius: 40px 20px;
    border-radius: 40px 20px;
}

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

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


-webkit-border-radius: 10px 40px 20px;
-moz-border-radius: 10px 40px 20px;  
border-radius:  10px 40px 20px;

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

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

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

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

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


-webkit-border-radius: 0px 10px 20px 40px;
-moz-border-radius: 0px 10px 20px 40px;
border-radius:  0px 10px 20px 40px;

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

2. Верхний правый – 10px

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

4. Нижний левый – 40px

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


-webkit-border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
border-radius: 20px 0px 0px 20px;

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


-webkit-border-radius: 20px 20px 0px 0px;
-moz-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;

Закругления сверху


-webkit-border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
border-radius:  0px 20px 20px 0px;

Закругления снизу


-webkit-border-radius: 0px 0px 20px 20px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius:  0px 0px 20px 20px;

Круг из квадратного блока

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


HTML

<div>
  &nbsp;
</div>



CSS

.circle{
    width: 150px;
    height: 150px;
    border: 3px solid #444;
    background-color: #fC0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

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

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


HTML

<div>
  &nbsp;
</div>



CSS

.rounding{
    width: 200px;
    height: 100px;	
    background-color: #fC0;
    border: 3px solid #444;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;  
}

38 статей о создании закругленных углов на сайтах | HTML и CSS

Простой, семантически правильный CSS блок с чистым кодом

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

Закругленные углы в CSS

Очень приятный внешний вид, простая реализация, малое количество HTML-элементов. К минусам, пожалуй, можно отнести только наличие 4 картинок для каждого из углов. Но увы не работает в IE.

CSS тизер-блок

Предусмотрена реализация как одно- так и двух-картиночного метода. Малое количество HTML-элементов. Очень удобно для создания тизеров.

Ссылки на последние новости

Очень интересное решение на основе неупорядоченного списка. Плюсом будет простая реализация и малое количество HTML-элементов. Приятное оформление с функцией изменения цвета при наведении мышкой (но эта приятность не работает в IE).

CSS и закругленные углы: Границы с дугами

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

Озаглавленные сверху углы

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

Создание скругленного блока или дизайн с CSS и XHTML

Как и в предыдущем способе все реализовано на основе списка определений. В статье рассмотрено два способа реализации. Так же появилась возможность тянущейся ширины.

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

Минусами в этом способе так же является большое количество дивов (5) и 4 файлов картинок. Но есть интересные примеры для реализации.

Закругленные углы бордера

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

Закругленные углы в CSS

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

Создание произвольных углов и границ

Используется 4 файла с картинками (максимальная ширина блока зависит от ширины картинки). Но очень подробный урок.

«Пуленепробиваемые» закругленные углы


Очень подробная статья с большим количеством примеров. Но достаточно сложная реализация. К тому же используется 4 картинки.

Рисование теней и рамок элементов оформления

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

Закругленные углы с фиксированной шириной

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

CSS тянущийся блок с 4 произвольными углами

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

Делаем закругленные углы с помощью псевдоэлементов :before и :after

Статья уже была описана на Хабре. Очень простая реализация, но не все примеры, приведенные в статье, работаю в IE. Используется 4 файла с картинками для реализации. Статья на русском.

Создание произвольных углов и границ. Часть II

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

Закругленные углы в DIVах

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

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

Пожалуй, не очень хороший способ, так как используется 5 картинок. Но вроде бы предусмотрена возможность создания тени. Плюс — использование только двух HTML-элементом.

Занимательная верстка

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

 

Еще больше закругленных углов с CSS

Приятная на внешний вид техника, но жаль, что нет реализации PNG под IE.

CSS резиновые закругленные углы

Использует по два пустых тега на верх и низ блока. К минусам относится 6 картинок для реализации.

CSS: Умные углы

Использует один пустой <span> для верха и два для низа. Вполне приятная реализация.

Как сделать тянущиеся по ширине divы с круглыми краями

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

Тянущиеся закругленные углы

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

Закругление углов без использования изображений

Способ безкартиночного создания закругленных углов. Но много пустых элементов <B> (способ, аналогичный блокам GMail).

 

Представление DomCorners

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

Прозрачные произвольные углы и границы.

Версия 2

Приятный пример использования. Красивое оформление. Отбрасывание полупрозрачных теней, но тени не работают в IE.

Nifty углы со сглаживанием

В своем роде является добавление к скрипту Nifty Corners. Не использует изображений. Можно изменять радиус скругления как по оси X так и по Y.

Закругленные углы

Очень простая реализация, всего один элемент div. Так же в комментариях много дополнений.

www.curvycorners.net

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

Nifty Corners Cube

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

RUZEE.Borders — закругленные углы с помощью яваскрипта

Достаточно большое количество возможностей. Так же основан на Nifty. Возможность создавать тень, но не работает в IE.

jQuery скругление

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

 

RoundedCornr

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

Spiffy Corners

Очень простой генератор. Но генерирует очень большое количество элементов <B>.

Spanky Corners 1.1

Простой генератор с хорошим HTML-кодов, плюс генерирует отдельный css-файл для IE.

Spiffy Box

Генерирует одну png-картинку с заданными параметрами. К плюсам можно отнести простой HTML-код. Так же в статье есть ссылка на урок, по которому создан генерируемый код.

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

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

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

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

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

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

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

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

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

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

<div class=”round-corner”> </div>

<div class=”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. 1.Открываете CSS файл вашей темы или страницы и там в самом конце дописываете:

    .round-corner{ border-radius: 20px; }

    .round-corner{

    border-radius: 20px;

    }

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

  2. 2.Этот же код можно прописать прямо на странице вашего сайта, обернув его в тег style

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

    <style> .round-corner{ border-radius: 20px; } </style>

    <style>

    .round-corner{

    border-radius: 20px;

    }

    </style>

  3. 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. 1.На первом месте – левый-верхний угол
  2. 2.На втором – правый верхний угол
  3. 3.На третьем – правый нижний угол
  4. 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 border-radius. Вы можете использовать свойство border-radius, чтобы добавить закругленные углы к любому элементу в CSS.

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

Радиус границы CSS

Границы — это линии, окружающие внешний край веб-элемента.

Найдите свой учебный курс