CSS3 rounded corner with google map

google map marker css
apply css on google map marker
map marker icon css
css marker image
google maps position
add google map to website with marker
google maps get markers
google map icons

I am trying to apply rounded border using with css3 border-radius property in Google map but its not work in chrome, in other browser its work great. Any ideas or suggestions? Here i am putting my code and waiting positive reply. Thanks

<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style type="text/css" >
#map {
    position: absolute; 
    top: 120px; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    overflow: hidden;
    border:solid 3px #00FF33; 
    width: 500px; 
    height: 200px; 
    margin:0 auto;  
#wrapper {
<div id="wrapper">
  <div id="map" ></div>
<script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP

  var infowindow = new google.maps.InfoWindow();
    var i,marker;
    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: 'marker_icon.png',
        borderRadius: 20,
        animation: google.maps.Animation.DROP

      google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]+' <img src="map-pin.png" /> <div style="background:#090;height:100px;width:200px;">yeah its working perfect ..!!!</div><a href="http://www.google.com">Google</a><form><a href="javascript: alert(\'foo!\');">Click Me</a></form>');
          infowindow.open(map, marker);
      })(marker, i));

As much as we want to, we currently can't.

The alternative is overlaying rounded corner cut-outs over each of the corners, to make it look like the corners are rounded. Basically create a rounded square, invert it so it becomes a cut-out shape, split into 4 corner pieces, position each corner inside a parent container.


.container { width: 400px; height: 300px; position: relative; }
.map { width: 100%; height: 100%; }
.corner { width: 30px; height: 30px; position: absolute; background-image: url(my/corners.png) }
.corner.topleft { top: 0; left: 0; background-position: 0 0; }
.corner.topright, etc.

Google Map - Rounded Corner Problem, I'm trying to find a solution make a rounded corner google map This topic is empty. Viewing 3 posts - 1 through 3 (of 3 total) Author Posts March 28, 2013 at 4:04 pm #43742 foomanParticipant Apparently there is a bug in webkit, or so I’ve come to understand, that will cause Chrome to not hide the inner div’s contents when using border-radius. Is there any decent …

I currently had the same problem with Safari and Chrome. I had to put translate3d to zero for Chrome and add a webkit-mask-image for Safari:

-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-mask-image: -webkit-radial-gradient(white, black);

How to show a map with Rounded corners in Googl, Which version of google chrome are you using. Since i am getting rounded corners with these 2 css. CSS Advanced CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS

You have to style the div within the map element, not the map element.

map > div {
    border-radius: 10px;

Google Map with transparent rounded corners in Chrome, It's weird, setting border-radius on map too helps some, but only on the right side. Author. Posts. Viewing 3 posts - 1 through 3 (of 3 total). The CSS border-radius property defines the radius of an element's corners. Tip: This property allows you to add rounded corners to elements! Here are three examples: 1. Rounded corners for an element with a specified background color: Rounded corners! 2. Rounded corners for an element with a border: Rounded corners! 3.

If you want to achieve the same effect without the use of any image, here is a solution on jsfiddle http://jsfiddle.net/alxscms/3Kv99/. You can also add a faded inner border if you'd like, without breaking the navigation inside the map.

Here is the code for the html:

<div class="wrapper">
    <div class="map" id="map"></div>
    <i class="top"></i>
    <i class="right"></i>
    <i class="bottom"></i>
    <i class="left"></i>
    <i class="top left"></i>
    <i class="top right"></i>
    <i class="bottom left"></i>
    <i class="bottom right"></i>

And the style (scss):

$radius: 10px;
$thickness: 5px;
$border-color: rgba(black, 0.15);
$background-color: white;

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
  margin: 50px;

  & > i {
    display: block;
    position: absolute;

    &.top {
      top: 0;
      border-top: $thickness solid $border-color;
      &:after {
        top: -$radius/2 - $thickness;
        border-top: $radius/2 solid $background-color;
    &.right {
      right: 0;
      border-right: $thickness solid $border-color;
      &:after {
        right: -$radius/2 - $thickness;
        border-right: $radius/2 solid $background-color;
    &.bottom {
      bottom: 0;
      border-bottom: $thickness solid $border-color;
      &:after {
        bottom: -$radius/2 - $thickness;
        border-bottom: $radius/2 solid $background-color;
    &.left {
      left: 0;
      border-left: $thickness solid $border-color;
      &:after {
        left: -$radius/2 - $thickness;
        border-left: $radius/2 solid $background-color;

    &.bottom:not(.right):not(.left) {
      height: $thickness;
      left: $radius+$thickness;
      right: $radius+$thickness;

    &.right:not(.top):not(.bottom) {
      width: $thickness;
      top: $radius+$thickness;
      bottom: $radius+$thickness;

    &.bottom.left {
      width: $radius;
      height: $radius;

      &:after {
        position: absolute;
        width: 1.5*$radius;
        height: 1.5*$radius;

    &.top.right {
      border-top-right-radius: $radius;
      &:after { border-top-right-radius: 1.5*$radius; }
    &.top.left {
      border-top-left-radius: $radius;
      &:after { border-top-left-radius: 1.5*$radius; }
    &.bottom.right {
      border-bottom-right-radius: $radius;
      &:after { border-bottom-right-radius: 1.5*$radius; }
    &.bottom.left {
      border-bottom-left-radius: $radius;
      &:after { border-bottom-left-radius: 1.5*$radius; }

#map {
  width: inherit;
  height: inherit;
  .gmnoprint {
    display: none;

Rounded Corners Google Map iFrame - JSFiddle, Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code <​iframe class="googlemap" src="https://www.google.com/maps/embed?pb=!1m18​  Definition and Usage. The border-radius property defines the radius of the element's corners.. Tip: This property allows you to add rounded corners to elements! This property can have from one to four values.

It worked for me as I added the z-index property:

#map {

Google map border radius - JSFiddle, 1) The Google Maps v3 API ignores CSS borderRadius applied to the map container. 2) Maps using Google's suggested iframe (embed) method, respect the  Find local businesses, view maps and get driving directions in Google Maps. When you have eliminated the JavaScript , whatever remains must be an empty page. Enable JavaScript to see Google Maps.

Map DIV canvas with round corners?, How could I round Google maps DIV canvas corners, is it possible? Thanks, By far the easiest way is to use the CSS3 border-radius property: Markup to render google map --> < /div > In my CSS style definition i can achieve rounded corners of particular div by below definition.Just add the below code to your CSS file # InfoWindowFprGoogleMap { border-radius: 10px 10px 10px 10px;}

CSS border-radius property, Tip: This property allows you to add rounded corners to elements! This property can have from one to four values. Here are the rules: Four values - border-radius:​  Interactive maps are neat. It’s not hard to get a basic map embedded on your page, but Google provides a rich and easy to use API for embedding and decorating maps on your web page, so there

CSS Rounded Corners, CSS Rounded Corners. With the CSS border-radius property, you can give any element "rounded corners". Here are three examples: 1. Rounded corners for an element with a specified background color: Google Maps · Range Sliders Embed a Google Map in Your Website Home / Styles / Add Rounded Borders to the Form and Fields. This article shows you how to add CSS3 rounded corners to your

  • It works! nice hack. Is it only needed for Chrome and Safari?
  • I had to style both that div and its immediate child div
  • Instead of setting it to the immediate child's div like @guss-hogg-blake said, i added overflow: hidden; to the above css.
  • overflow: hidden; worked for me as per @Terrabythia's comment.
  • Perfect answer. Clean and no hacks. This even fixed the damn flickering problem when zooming. Thank you a lot.
  • This doesn't work using your preview on chrome.
  • It appears to be working in the current version (56.0.2924.87) of Chrome.
  • It didn't went I wrote that comment 7 months ago.