Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>Inner border calculations</strong></p> <p>First, you'll need to remove <code>-vendor-background-clip: padding-box</code> or set them to <code>border-box</code> the default in order to achieve the inner border radius.</p> <p>The inner border radius is calculated as the difference of the outer border radius (<code>border-radius</code>) and the border width (<code>border-width</code>) such that </p> <p><code>inner border radius = outer border radius - border width</code></p> <p>Whenever the <code>border-width</code> is greater than the <code>border-radius</code>, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the <code>inner-border-radius</code>, so you'll need to calculate it manually.</p> <p>In your case:</p> <p><code>inner border radius = 6px - 5px = 1px</code></p> <p>Your new CSS should be:</p> <pre><code>.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .template-bg { background: #FFF; } .template-border { border: 5px solid rgba(255, 255, 255, 0.2); } </code></pre> <p>Simply subtract the <code>border-radius</code> (6px) values from the <code>border-width</code> value (5px) in order to achieve your desired inner-border-radius: </p> <hr> <p><strong>Code that works for me</strong></p> <p>Tested on Firefox 3.x, Google Chrome, and Safari 5.0</p> <pre><code> .radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .template-bg { background: #FFF; } .template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */ </code></pre> <hr> <p><strong>Adding color overlays in JavaScript</strong></p> <pre><code>&lt;script type="text/javascript"&gt; var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;; // insert opacity decreasing code here for hexadecimal var header = document.getElementsByTagName('header')[0]; header.style.backgroundColor = bodyBgColor; &lt;/script&gt; </code></pre> <p>I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.</p> <hr> <p><strong>Applying General Borders</strong></p> <p>Are you using a separate box <code>&lt;div&gt;</code> for your border through its <code>background</code> property? If so, you'll need to apply <code>border-radius</code> and its vendor specific properties on both the border box and the inner box:</p> <pre><code>&lt;div id="border-box" style="border-radius: 5px;"&gt; &lt;div id="inner-box" style="border-radius: 5px;"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>A much more efficient way would simply have the inner-box manage its own border:</p> <pre><code>&lt;div id="inner-box" style="border: 4px solid blue; border-radius: 5px"&gt; &lt;!-- Content --&gt; &lt;/div&gt; </code></pre> <p>CSS-wise, you could just declare a <code>.rounded-border</code> class and apply it to every box that will have rounded borders:</p> <pre><code>.rounded-borders { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; } </code></pre> <p>And apply the class to any boxes that will have rounded borders:</p> <pre><code>&lt;div id="border-box" class="rounded-borders"&gt; &lt;div id="inner-box" class="rounded-borders"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>For a single box element, you'll still be required to declare the border size in order to be shown:</p> <pre><code>&lt;style type="text/css"&gt; #inner-box { border: 4px solid blue; } &lt;/style&gt; &lt;div id="inner-box" class="rounded-borders"&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHow to make round corners to both inside of a box and its border?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USGio Borje
    1. USGio Borje
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to make round corners to both inside of a box and its border?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you for your answer. My current solution is very similar to the one you are suggesting, and it doesn't work. What else should I try?
      singulars
      1. PO
      1. USlinkyndy
    2. CO@linkyndy, Thanks for posting the markup, the issue you're face with is inner border calculations.
      singulars
      1. PO
      1. USGio Borje
    3. COThank you very much for clarifying. I manage to achieve the 'inner' border, but only for Firefox and IE9. In Chrome, Safari and Opera, the 'inner' box remains without any rounded corner, and the sharp edges nearly get through the border's rounded corners. Is there a 'remedy' for this? It's worth mentioning that I need the background-clip because my border is the same colour as the background, only has the opacity lower. If I set background clip to border-box, then the border wouldn't be seen anymore. Thank you again.
      singulars
      1. PO
      1. USlinkyndy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload