CSS: transparent border for a div

Question

I want to replicate this transparent border:

I've found this other question:

How to make a transparent border using CSS?

And tried to follow the answer in there.

In my CSS, I've tried this:

.border-6 {
    border-width:6px !important;
}


.border-transparent {
    border: 5px solid rgba(255, 255, 255, .5) !important;
}


.bgwhite {
  background-color: white;
}

But it's not working:

HTML:

<div class="border-transparent col-md-6 rounded border-6 bgwhite">

                    <div class="m-5">

                        <div class="row">
                            <form action="/post_url_tamanioscantidades/" method="post">
                                {% csrf_token %}
                                {{ tamanioscantidades_form.as_p }}
                                <input type="submit" value="Submit"/>
                            </form>

                        </div>

                    </div>

UPDATE 1:

Based on first answer, now I have:

CSS:

.border-6 {
    border-width:6px !important;
    /*border-color: rgba(60, 60, 60, 0.5) !important;*/
}


.border-transparent {
    border: 5px solid rgba(255, 255, 255, .5) !important;
}

.bgred {
  background-color: red;
}

The border I see is lighter red, but not transparent, as I'd expect:

Have you tried with `opacity: 0.8` or other number? – D.V.D. Oct 28 '18 at 02:33 — D.V.D., Oct 28 '18 at 02:33

carlokid · Answer 1 · 2018-10-28T03:13:21.617

2

Update your .border-transparent css to below property.

border: 5px solid rgba(255, 0, 0, 0.5);
background-clip: padding-box;

Background-clip defines how far the background should extend within an element. Thus, background formatting extend only within the element's padding and corresponding border property will not be affected.

edited Oct 28 '18 at 03:13

answered Oct 28 '18 at 02:53

carlokid

207
1
4

score 1 · Accepted Answer · edited Oct 28 '18 at 06:35

1

You'd probably have a more consistent UX if you used padding instead of a border

.semi-transparent {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .padded {
    padding: 6px;
    padding: .5rem;
  }
  .bg-white {
    background-color: #FFFFFF;
  }
  .rounded {
    border-radius: 3px;
    border-radius: .25rem;
  }

<div class="semi-transparent padded rounded">
  <div class="bg-white rounded padded">
    Your Content
  </div>
<div>

edited Oct 28 '18 at 06:35

Maarti

3,600
4
17
34

answered Oct 28 '18 at 02:15

Sampson Crowley

1,244
1
9
22

ty. It works. May you expand on why using in the padded clases px and .rem? What's the difference? – Omar Gonzales Oct 28 '18 at 02:36
@Omar Gonzales em and rem is used to set sizes off of a base font-size. So you can have em/rem settings throughout an app and only have to change one value to modify ALL of it. But not all browsers support em units, so set it to a pixel value first as a fall back – Sampson Crowley Oct 28 '18 at 02:46
https://stackoverflow.com/questions/4474107/what-is-the-em-font-size-unit-how-much-is-it-in-pixels – Sampson Crowley Oct 28 '18 at 02:51

score 1 · Answer 3 · answered Oct 28 '18 at 02:35

Don't set background and border in same container, place border outside

body{
  background-image: url(https://i.postimg.cc/DzC89QBc/164188940-cubes-wallpapers.jpg)
}


.border-transparent {
 border: 15px solid rgba(255, 255, 255, 0.3) !important;
}

.bgred {
  background-color: red;
}

<div class="border-transparent">

  <div class="m-5 bgred">

    <div class="row">
      <form action="/post_url_tamanioscantidades/" method="post">
        <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium nisl velit, et egestas arcu finibus non. Vestibulum varius suscipit venenatis. Fusce porttitor, nisi id finibus imperdiet, nibh neque blandit nibh, at cursus felis tellus quis nulla. Nullam nec sodales ipsum. Vestibulum eget velit nulla. Proin libero magna, lacinia at nibh ut, tristique iaculis sem.
        </span>
        <input type="submit" value="Submit" />
      </form>

    </div>

  </div>

score 1 · Answer 4 · answered Oct 28 '18 at 02:45

You can use box-shadow.

body {
  background: url(https://unsplash.it/200);
}

div {
  box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.5);
  border-radius: 2px;
  
  /* for demo */
  background: red;
  padding: 1em;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50vmax;
  height: 50vmax;
  margin: auto;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium esse unde tenetur recusandae commodi soluta aut, illo error vel. Sequi eos, iste aliquid reiciendis eius inventore aspernatur hic nostrum recusandae.</p>
</div>

score 0 · Answer 5 · answered Oct 28 '18 at 01:16

0

The problem is your background color is white, and rgba(255, 255, 255, .5) is still white too, if you change your bgwhite to bgred or something else. you can see the border.

Or like the first example, change the rbga(255, 255, 255, .5) to rbga(155, 155, 155, .5)

answered Oct 28 '18 at 01:16

TsaiKoga

12,914
2
19
28

please, see my update. Do I need to add another div to specify the border on it? What would you suggest? – Omar Gonzales Oct 28 '18 at 01:44

CSS: transparent border for a div

5 Answers5