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 this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.

I hope this is helpful!

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