Questions tagged [border]

A border is a graphical user interface construct that is used to surround and/or highlight something that is contained within.

A border is a graphical user interface contruct that is used to surround and/or highlight something that is contained within. Borders are often seen as visible rectangles of a specified width, though they could be of any shape.

5352 questions

1472

votes

11 answers

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

asked Aug 03 '10 at 13:49

Joey Morani

21,793
29
79
126

701

votes

19 answers

How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right.

css input safari webkit border

asked Sep 22 '09 at 02:22

user170579

7,400
6
22
21

575

votes

12 answers

Should I use 'border: none' or 'border: 0'?

Which of the two methods conforms to W3C standards? Do they both behave as expected across browsers? border: none; border: 0;

css border

asked May 27 '10 at 16:25

John Himmelman

20,084
20
61
79

557

votes

14 answers

Placing border inside of div and not on its edge

I have a

element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what I want. I would rather have this border be -1px from the edge of the div.…

html css border

asked Mar 07 '12 at 12:16

TheMonkeyMan

7,184
7
23
40

421

votes

25 answers

Is there an easy way to add a border to the top and bottom of an Android View?

I have a TextView and I'd like to add a black border along its top and bottom borders. I tried adding android:drawableTop and android:drawableBottom to the TextView, but that only caused the entire view to become black.

android border android-view textview

asked Oct 21 '09 at 00:34

emmby

95,927
63
178
243

392

votes

8 answers

How to reset / remove chrome's input highlighting / focus border?

I have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

css google-chrome focus border

asked May 31 '10 at 12:37

Jiew Meng

74,635
166
442
756

358

votes

17 answers

Border for an Image view in Android?

How can I set a border for an ImageView and change its color in Android?

android border imageview

asked Jul 16 '10 at 09:43

Praveen

86,996
72
173
215

322

votes

18 answers

How to increase space between dotted border dots

I am using dotted style border in my box like .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } I want to the increase the space between each dot of the border.

html css border

asked Jun 06 '11 at 10:00

Kali Charan Rajput

10,526
9
31
45

271

votes

9 answers

Remove white space below image

In Firefox only my video thumbnails are displaying mysterious 2-3 pixels of white space between the bottom of my image and its border (see below). I've tried everything I can think of in Firebug with no luck. How can I remove this white space?

css image whitespace border removing-whitespace

asked Oct 15 '11 at 00:11

Ryan

5,523
16
48
84

234

votes

9 answers

Android - border for button

How do I add a border to a button? Is it possible to do this without resorting to use of images?

android button border

asked Oct 07 '11 at 16:55

jeffreyveon

12,818
17
72
113

216

votes

9 answers

How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code:

<div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> 
                
                <a href="../../questions/tagged/border" class="post-tag grid--cell" title="show questions tagged 'border'" rel="tag">border</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jan 07 '10 at 13:16">asked Jan 07 '10 at 13:16</time>
    <a href="../../users/194328/rkh" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/194328.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="RKh" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/194328/rkh" class="s-user-card--link">RKh</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">12,396</li>
            <li class="s-award-bling s-award-bling__gold" title="38 gold badges">38</li>
            <li class="s-award-bling s-award-bling__silver" title="139 silver badges">139</li>
            <li class="s-award-bling s-award-bling__bronze" title="244 bronze badges">244</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-147528">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>204</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>17</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/147528/how-do-i-force-a-div-block-to-extend-to-the-bottom-of-a-page-even-if-it-has-no" class="question-hyperlink">How do I force a DIV block to extend to the bottom of a page even if it has no content?</a></h3>
        <div class="excerpt">In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is so the vertical border still appears down the page…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/border" class="post-tag grid--cell" title="show questions tagged 'border'" rel="tag">border</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Sep 29 '08 at 04:40">asked Sep 29 '08 at 04:40</time>
    <a href="../../users/17211/razor" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/17211.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Razor" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/17211/razor" class="s-user-card--link">Razor</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">16,811</li>
            <li class="s-award-bling s-award-bling__gold" title="22 gold badges">22</li>
            <li class="s-award-bling s-award-bling__silver" title="87 silver badges">87</li>
            <li class="s-award-bling s-award-bling__bronze" title="137 bronze badges">137</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-1257430">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>199</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>9</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/1257430/how-can-i-apply-a-border-only-inside-a-table" class="question-hyperlink">How can I apply a border only inside a table?</a></h3>
        <div class="excerpt">I am trying to figure out how to add border only inside the table. When I do:
table {
    border: 0;
}
table td, table th {
    border: 1px solid black;
}

The border is around the whole table and also between table cells. What I want to achieve is…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> 
                
                <a href="../../questions/tagged/html-table" class="post-tag grid--cell" title="show questions tagged 'html-table'" rel="tag">html-table</a> 
                
                <a href="../../questions/tagged/border" class="post-tag grid--cell" title="show questions tagged 'border'" rel="tag">border</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Aug 10 '09 at 21:52">asked Aug 10 '09 at 21:52</time>
    <a href="../../users/95944/richard-knop" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/95944.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Richard Knop" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/95944/richard-knop" class="s-user-card--link">Richard Knop</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">73,317</li>
            <li class="s-award-bling s-award-bling__gold" title="142 gold badges">142</li>
            <li class="s-award-bling s-award-bling__silver" title="374 silver badges">374</li>
            <li class="s-award-bling s-award-bling__bronze" title="539 bronze badges">539</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-12301256">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>193</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>10</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/12301256/is-it-possible-to-set-uiview-border-properties-from-interface-builder" class="question-hyperlink">Is it possible to set UIView border properties from interface builder?</a></h3>
        <div class="excerpt">Is it possible to control UIView border properties (color, thickness, etc...) directly from interface builder or I can only do it programmatically?
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/ios" class="post-tag grid--cell" title="show questions tagged 'ios'" rel="tag">ios</a> 
                
                <a href="../../questions/tagged/uiview" class="post-tag grid--cell" title="show questions tagged 'uiview'" rel="tag">uiview</a> 
                
                <a href="../../questions/tagged/interface-builder" class="post-tag grid--cell" title="show questions tagged 'interface-builder'" rel="tag">interface-builder</a> 
                
                <a href="../../questions/tagged/border" class="post-tag grid--cell" title="show questions tagged 'border'" rel="tag">border</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Sep 06 '12 at 13:31">asked Sep 06 '12 at 13:31</time>
    <a href="../../users/1042989/matteo-cajani" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/1042989.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="matteo.cajani" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/1042989/matteo-cajani" class="s-user-card--link">matteo.cajani</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,325</li>
            <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
            <li class="s-award-bling s-award-bling__silver" title="17 silver badges">17</li>
            <li class="s-award-bling s-award-bling__bronze" title="17 bronze badges">17</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-5670879">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>179</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>11</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/5670879/css-html-create-a-glowing-border-around-an-input-field" class="question-hyperlink">CSS/HTML: Create a glowing border around an Input Field</a></h3>
        <div class="excerpt">I want to create some decent inputs for my form, and I would really like to know how TWITTER does their glowing border around their inputs.
Example/Picture of the Twitter border:

I also don't quite know how to create the rounded corners.
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> 
                
                <a href="../../questions/tagged/input" class="post-tag grid--cell" title="show questions tagged 'input'" rel="tag">input</a> 
                
                <a href="../../questions/tagged/border" class="post-tag grid--cell" title="show questions tagged 'border'" rel="tag">border</a> 
                
                <a href="../../questions/tagged/glow" class="post-tag grid--cell" title="show questions tagged 'glow'" rel="tag">glow</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Apr 14 '11 at 23:32">asked Apr 14 '11 at 23:32</time>
    <a href="../../users/708920/hans" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/708920.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Hans" onerror="onImageLoadingError(this);" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/708920/hans" class="s-user-card--link">Hans</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,805</li>
            <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li>
            <li class="s-award-bling s-award-bling__silver" title="13 silver badges">13</li>
            <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script>
            /* replace <time class="fromnow" /> with human delta between `datetime` attr and now */
            document.addEventListener('DOMContentLoaded', function(){
                var time_elements = document.querySelectorAll("time.fromnow");
                for (var i=0; i<time_elements.length; i++) {
                    time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow();
                }
            });
        </script>
        
    </body>
</html>