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

Question

[Валерий]

Доброе утро,

может быть кто-то подскажет вменяемый способ скругления уголвков Яндекс.Карт, кроме наложения поверх PNG?
Простой border-radius, конечно, же не работает

Answer 1

[Makito]

Самый простой и удобный способ, если не работает border-radius остается, как ни странно, наложение картинок png :)

Comments

[Валерий]

Сейчас так и делаю, но стало интересно, а вдруг есть более нормальный способ :)

[Валерий]

А вот если «скругление» — перекрытие 30% карты с одного из углов — то тут уже просто так картинкой не обойтись, т.к. карта остается под картинкой, и соответственно перестает быть кликабельной

[Makito]

В таком случае оторвите голову дизайнеру :)

Answer 2

[100lker]

может кому до сих пор нужно, но я скруглил так:
#map > ymaps {
border-radius: 5px;
overflow: hidden;
}
если задавать скругление блоку #map, то оно не работает.

Comments

[Таня]

Спасибо, это решение мне помогло

Answer 3

[spmbt]

Нашёл Яндекс-карту webklad.net/index.php/lessons-of-a-theme/193-how-to-insert-yandex-a-card-on-a-site.html, применил к .YMaps.YMaps-cursor-grab border-radius:10px — работает (Fx14). Что в этом способе не так?

Comments

[Валерий]

В FF — работает, не спорю.
Хром — не работает, дальше не проверял.

Answer 4

[Иван]

а что если «завернуть» карту в iframe?

Comments

[Валерий]

Не пробовал, но на мой вгляд, лучше уж PNG по углам ))

Answer 5

[Андрей]

Кто будет гуглить:

<div class="map">
  <iframe src=" ссылка на карту " width="100%" height="100%" frameborder="0"></iframe>
</div>

.map iframe {
border-radius: 30px;
}

Comments

[ego_trickster]

Подскажите второй кусок кода как оборачивать? Можете показать целиковый вариант?

[barborice]

Помогло! Большое спасибо!

[gulnaz_web]

Сработало, спасибо!

Answer 6

[Urvin]

Прогуглите «как спрятать внутренние элементы в border-radius».
www.boogdesign.com/b2evo/index.php/firefox-img-rounded-corners-svg?blog=2