title: Changing the outer opacity without affecting the inner in CSS
body: <p>The effect I want to create is a transparent border effect. I have created the box using two div tags, one for the inner and one for the outer. `</p>
  
  <p><img src="https://i.stack.imgur.com/xPkke.png" alt="enter image description here"></p>
  
  <p>The HTML I used for this is:</p>
  
  <pre><code>&lt;div class="main_box_outer"&gt;
      &lt;div class="main_box_inner"&gt;
      &lt;/div&gt;&lt;!--/ inner--&gt;
  &lt;/div&gt;&lt;!--/ outer--&gt;`
  </code></pre>
  
  <p>The CSS I used to create this is:</p>
  
  <pre><code>.main_box_inner {
  width: 30em;
  height: 20em;
  background: white;
  border-radius: 1em; }
  
  
  .main_box_outer {
  display: inline-block;
  background: black;
  padding: 1em;
  border-radius: 2em; 
  opacity:1; }
  </code></pre>
  
  <p>However, when I change the opacity of the outer box (the border) in CSS, it also changes the inner box's opacity because the inner box div is contained inside the outer box div. How can I change the outer opacity without affecting the opacity of the inner box?</p>