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:

<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>

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;
}

Answer 2

NOTE: for people brought here by google but with different problem

If you want to hide just borders not making it edge less keeping original design just do following:

HTML:

<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>

CSS:

.captcha iframe {
      position: relative;
      box-shadow: none !important;
    }