Dev Stack Source

Answer : I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property. Look at the simple example below in your browser: <div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div> <div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div> Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div. You can read more about it here: Border Outline Try the outline property W3Schools - CSS Outline Outline will not interfere with widths and lenghts of the elemen...

Answer : Here you go: .glowing-border { border: 2px solid #dadada; border-radius: 7px; } .glowing-border:focus { outline: none; border-color: #9ecaed; box-shadow: 0 0 10px #9ecaed; } Live demo: http://jsfiddle.net/simevidas/CXUpm/1/show/ (to view the code for the demo, remove "show/" from the URL) label { display:block; margin:20px; width:420px; overflow:auto; font-family:sans-serif; font-size:20px; color:#444; text-shadow:0 0 2px #ddd; padding:20px 10px 10px 0; } input { float:right; width:200px; border:2px solid #dadada; border-radius:7px; font-size:20px; padding:5px; margin-top:-10px; } input:focus { outline:none; border-color:#9ecaed; box-shadow:0 0 10px #9ecaed; } <label> Aktuelles Passwort: <input type="password"> </label> <label> Neues Passwort: <input type="password"> </label> How about something like this... ht...

Answer : You can add multiple borders using pseudo elements, and then place them around your original border. No extra markup. Cross-browser compatible, this has been around since CSS 2.1. I threw a demo up on jsfiddle for you....note, the spacing between border colors is there for the example. You can close it by altering the number of pixels in the absolute positioning. .border { border:2px solid #36F; position:relative; z-index:10 } .border:before { content:""; display:block; position:absolute; z-index:-1; top:2px; left:2px; right:2px; bottom:2px; border:2px solid #36F } http://jsfiddle.net/fvHJq/1/ Use box shadow fo 2nd border. div.double-border { border: 1px solid #fff; -webkit-box-shadow: 0px 0px 0px 1px #000; -moz-box-shadow: 0px 0px 0px 1px #000; box-shadow: 0px 0px 0px 1px #000; } In this case box-shadow does not ignore border-radius property like outline does A very simple solution you could use as...

Answer : On a Border control You can do BorderThickness="0 0 0 1" to only have a bottom border shown. Top and bottom border thickness of 5, left and right border thickness of 0 BorderThickness="0 5" Top and bottom border thickness of 0, left and right border thickness of 5 BorderThickness="5 0" Border Thickness - Left: 1, Top: 2, Right:3, Bottom: 4 BorderThickness="1 2 3 4" Hope this helps!

Answer : In CSS3, you can try to (ab)use the max css function, if your browser supports it. border-width: max(1px, 0.1em); border-style: solid; border-color: black; Unfortunately this awesome CSS3 feature isn't supported by any browsers yet, but I hope this will change soon! But in CSS2 – no, you can't. However, you can use JavaScript/jQuery to loop through all elements and increase the border size to 1px. But this will eat so much performance your browser is gonna crash if you have too many elements on your page (e.g. a table with more than 50-100 rows). So in other words, no it's not possible. $("[id$='ReportViewerControl']").find('*') .each(function () { if($(this).is('#ParametersRowReportViewerControl *')) return; //console.log("Processing an element"); //var cls = $(this).attr("class"); // Don't add a border to sort-arrow if ($(this).is...

Answer : You could use box-shadow , possibly: #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 10px #0f0; } #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 10px #0f0; } <div id="something"></div> This has the advantage that it will overlay the background-image of the div , but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course: #something { background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat; min-width: 300px; min-height: 300px; box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0; } #something { background: transparent url(https://i.stack.imgur.com/RL...

Answer : The native dashed border property value does not offer control over the dashes themselves... so bring on the border-image property! Brew your own border with border-image Compatibility : It offers great browser support (IE 11 and all modern browsers). A normal border can be set as a fallback for older browsers. Let's create these These borders will display exactly the same cross-browser! Step 1 - Create a suitable image This example is 15 pixels wide by 15 pixels high and the gaps are currently 5px wide. It is a .png with transparency. This is what it looks like in photoshop when zoomed in: This is what it looks like to scale: Controlling gap and stroke length To create wider / shorter gaps or strokes, widen / shorten the gaps or strokes in the image. Here is an image with wider 10px gaps: correctly scaled = Step 2 - Create the CSS — this example requires 4 basic steps Define the border-image-source: border-image-source:url("http://i.stack.imgur.com/wLdVc.png...