How To Hide The Border Of A Recaptcha V2.0 Widget?

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 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:

<divclass="my-div"><divclass="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-diviframe {
  position: relative;
  left: -10px;
}

Solution 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"><divclass="g-recaptcha"data-size="normal"data-sitekey="<your site key>"></div><div></div>

CSS:

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