Как закруглить углы у картинки в html | Уроки HTML, CSS

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

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

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

Сделать это можно следующим образом:

1) Через указание стиля тегу img:

2) Через назначение класса тегу img:

Тогда, сам класс должен быть указан в [head][/head] тегах:

[style]
.my_round {border-radius: 30px;}
[/style]

Вот полный пример страницы сайта:
[!DOCTYPE html]
[html lang="en"]
[head]
[meta charset="UTF-8"]
[title]картинка с закругленными углами[/title]
[style]
.my_round {border-radius: 30px;}
[/style]
[/head]
[body]
[/body]
[/html]

*** Внимание: Угловые скобки в описании нельзя разместить - поэтому вместо них использованы квадратные [ ] !!! ***

#html #картинка #закругление #углы #дизайн #design

Задавайте вопросы – постараюсь ответить 😊
Удачи в таких классных начинаниях!

[ЕленаАлексеева-йр]

Класс, все понятно и быстро, у меня получилось! Спасибо Вам!!!

[TheGraffityman]

Если честно, не ожила найти ответа. Перелопатил буржунет, какие-то сильно мудреные подсказки. А тут на видео просто в один миг ответ, один атрибут всего лишь. Спасибо!

[yuriefremenko]

Добрый день! А как сделать закругление для видео с YouTube iframe ? У Вас есть такое решение?