how to hide the border of a recaptcha v2.0 widget?

Question

I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site\'s look and feel.

NOTE: I\'m posting th

Answer 1

I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:

Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.

If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.

NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.

Hope this helps!

html:

css:

.my-div {
  display: inline-block;
  overflow: hidden;
  width: 290px;   /* note the embedded iframe is 302x76 */
  height: 74px;
  text-align: left;
}

.my-div iframe {
  position: relative;
  left: -10px;
}