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

@rmn · Регистрация: 14.05.2012

Студворк — интернет-сервис помощи студентам

Добрый день!
Есть блок <div> с закругленными углами. И есть вложенное изображение, которое занимает половину блока (прижато к левому краю).
Если просто вложить картинку в блок, то её углы перекрывают закругление...

Как сделать так, что-бы и у этого изображения были закругленные углы???

@monochromer · 29.01.2014, 16:03

У div'a сделайте overflow: hidden.

@SarMat4Life · 29.01.2014, 16:08

rmn, в порядке бреда

сделай 2 блока div, один с картинкой, второй с содержимым правой части твоего <div>, и к первому пропиши в стили:

CSS
1
2
3
border-radius: степень закругленности(в px);
    background: url(путь к картинке);
    background-repeat: no-repeat;

2й вариант: еще больше углубляемся в бред

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

) поверх этой картинки с правым позиционированием

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

@shut_down · 29.01.2014, 16:09

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

HTML5
1
<img src="[путь_к_изображению]" style="border-radius: 5px;">

@rmn · 29.01.2014, 16:16 **[ТС]**

Дело в том, что картинка это слайдер, картинки будут меняться.

Если использовать

HTML5
1
<img src="[путь_к_изображению]" style="border-radius: 5px;">

то закруглится с обеих сторон.

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

@monochromer · 29.01.2014, 16:53

rmn, Вы делали overflow: hidden?

@shut_down · 29.01.2014, 19:12

Сообщение от rmn

Дело в том, что картинка это слайдер, картинки будут меняться.

Если использовать

HTML5
1
<img src="[путь_к_изображению]" style="border-radius: 5px;">

то закруглится с обеих сторон.

Вот для того, чтобы закруглять картинку с разных сторон:

HTML5
1
<img src="[путь_к_изображению]" style="border-radius: [сверху]px, [cправа]px, [cнизу]px, [влева]px;">

.

@rmn · 30.01.2014, 13:55 **[ТС]**

В итоге я делал изображение чуть шире,

HTML5
1
<img src="[путь_к_изображению]" style="border-radius: 5px;">

и к блоку

HTML5
1
overflow: hidden

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

а

HTML5
1
style="border-radius:0 0 0 5px;"

не сработало

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@rmn 0 / 0 / 0 Регистрация: 14.05.2012 Сообщений: 35

	Закругленные углы у блоков и у вложенных изображений 29.01.2014, 15:48. Показов 7134. Ответов 7 Метки нет (Все метки) Добрый день! Есть блок <div> с закругленными углами. И есть вложенное изображение, которое занимает половину блока (прижато к левому краю). Если просто вложить картинку в блок, то её углы перекрывают закругление... Как сделать так, что-бы и у этого изображения были закругленные углы??? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	29.01.2014, 16:03
	У div'a сделайте overflow: hidden. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	29.01.2014, 16:53
	rmn, Вы делали overflow: hidden? 1