title: Element (background-image) opacity, but no border opacity
body: <p>I know how to do <a href="https://stackoverflow.com/questions/4062001/css3-border-opacity/4062032#comment15097259_4062032">border opacity</a>, how to do <a href="https://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity">background image opacity</a>, but I would like to have an element <strong>without</strong> border opacity, having backround-image opacity on. I don't want to modify image in image editor, so I am looking for opacity set by CSS. Possible?</p>
  
  <p>In my CSS below I want to modify <em>"disabled"</em> status with sharp no-opacity border. Please advice...</p>
  
  <p>Example of use: <a href="http://jsfiddle.net/49Gdt/" rel="nofollow noreferrer">this fiddle</a></p>
  
  <hr>
  
  <p><strong><em>button style:</em></strong></p>
  
  <pre><code>  div.button, div.button:hover
    {
      background: none;
      border: 2px solid #6C7B8B;
      border-radius: 8px;
      clear: none;
      color: transparent;
      cursor: pointer;
      display: inline-block;
      filter: alpha(opacity=100);
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      float: none;
      height: 24px;
      margin-bottom: 0px;
      margin-left: 3px;
      margin-right: 0px;
      margin-top: 7px;
      opacity: 1;
      -moz-opacity: 1;
      outline: none;
      overflow: hidden;
      padding: none;
      vertical-align: top;
      width: 24px;
    }
  </code></pre>
  
  <p><strong><em>click effect:</em></strong></p>
  
  <pre><code>  div.button:active
    {
      left: 1px;
      position: relative;
      top: 1px;
    }
  </code></pre>
  
  <p><strong><em>extra style for status DISABLED:</em></strong></p>
  
  <pre><code>  div.disabled, div.disabled:hover
    {
      cursor: default;
      filter: alpha(opacity=50);
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      opacity: 0.50;
      -moz-opacity: 0.50;
    }
  
    div.disabled:active
    {
      left: 0px;
      position: relative;
      top: 0px;
    }
  </code></pre>
  
  <p><strong><em>extra style for status ON:</em></strong></p>
  
  <pre><code>  div.on, div.on:hover
    {
      border: 2px solid #007FFF;
    }
  </code></pre>