Questions tagged [outline]

outline is a property in CSS, that is used to draw a line around the element. Question that has the problem related to outline property of CSS.

An outline is a line that is drawn around elements (outside the borders).

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

This link contains the example of outline .

The tutorial is here.

473 questions
16
votes
2 answers

Font outline using only CSS

I'm working on adding a black font outline to white text using CSS. The goal is the image below. So far I've been able to come up with below. Is there any other best practice to closer match the thin outline shown in the image below? Thanks! …
AndrewLeonardi
  • 3,351
  • 9
  • 47
  • 100
16
votes
2 answers

CSS box-shadow vs outline

I have not been able to find a duplicate and you can find a bunch of blog posts which suggest to use box-shadow for element's focus state instead of outline as it is more flexible in terms of styling and it also follows the border-radius of the…
Anton Kastritskiy
  • 1,248
  • 1
  • 11
  • 23
15
votes
1 answer

Setting a Font with outline Color in C#

I'm dynamically adding Labels to panels in my code. Something I want to do is be able to outline the font so that it can stand out from the background color of the panel. The problem is I don't know how to create a outline for my font or even a…
Kelsey Abreu
  • 1,094
  • 3
  • 17
  • 42
13
votes
4 answers

WCAG: Firefox and Edge don't show outline on focussed input elements when styles are applied

I'm creating a form, that is following some WCAG guidelines. One of those is: G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over. The summary of this rule is: Operating systems…
lampshade
  • 2,470
  • 3
  • 36
  • 74
13
votes
5 answers

Complex shape character outline

Say I have this character and I want allow user to select it, so when it s selected I want to show an outline around it. the character is an object3D with some meshes. I tried to clone and set a backside material, but it did NOT work, the problem…
Ashkan Ghodrat
  • 3,162
  • 2
  • 32
  • 36
13
votes
4 answers

Twitter Bootstrap set badge to no fill (or outline)?

Anyone know how to change a twitter bootstrap badge (or label) from solid to outlined?
Meltemi
  • 37,979
  • 50
  • 195
  • 293
13
votes
6 answers

outline:none; does NOT WORK - Only -webkit-appearance:none; is working - what is wrong here?

Edit: My concerns are for mobile websites. Let me get right to the point. No matter what I do, outline:none; does NOT remove any default highlighting/glows from input form elements using an Ipod Touch/Iphone. Everywhere I look, people say to…
Chatyak
  • 183
  • 1
  • 1
  • 11
13
votes
4 answers

Firefox ignores outline and focus styles on select elements when using Tab

Context Firefox 14 (and 13); specific CSS styles being ignored under certain conditions The Problem Using the following CSS: * { outline:none; -moz-outline:none; -moz-user-focus:ignore; } JSFiddle Firefox 14 (and 13) ignore these…
Evan Mulawski
  • 54,662
  • 15
  • 117
  • 144
12
votes
2 answers

CSS outline not rendering correctly in Firefox

I'm a bit baffled with the way the CSS outline property is rendering on Firefox 7 or below. It's clearly got a problem somewhere, but I just can't find it. It works fine on all other main browsers (Opera, Chrome, IE, Safari). I've added a couple of…
user706600
  • 175
  • 1
  • 7
12
votes
5 answers

Remove blue outline on links when clicking, but keep the outline for TAB selection (accessibility)

I have a Burger Menu Button which is selectable via TAB. When I click on it and the menu opens up the burger has this blue outline to make it clear that it is focused. I don't want to remove that blue outline, because it helps vision impaired people…
Merc
  • 4,241
  • 8
  • 52
  • 81
12
votes
5 answers

How can I outline the elements of an HTML page in the browser to see the layout of the boxes? Modify the user agent style sheet?

In the Chrome devtools, Firefox devtools, Safari, Opera, etc., if I inspect an element I can see its bounding box nicely outlined when I mouse over the code for that element in the source panel. That's great. But what if I'd like to see how all…
Purplejacket
  • 1,808
  • 2
  • 25
  • 43
12
votes
3 answers

Emacs equivalent of Vim's foldmethod = indent

Question: Does Emacs have a canonical equivalent of Vim's Folding with Foldmethod=indent? I am particularly interested in something that can work alongside any Emacs major mode and any file. The Emacs searches have not turned up a definitive answer.
dreftymac
  • 31,404
  • 26
  • 119
  • 182
12
votes
2 answers

Outline a transparent image using imagick PHP

I have an image with a transparent background that I'd like to outline with a 5px border. In photoshop, I can stroke it to achieve this. I've tried using borderImage but it won't outline the penguin. $image = new…
steve
  • 3,878
  • 7
  • 34
  • 49
12
votes
6 answers

Round the corners of outline?

So I have these four boxes, floated left, each with a 50% width of the page. I want them to have an outline of 1px solid gray, and I want to round the corners with 6px. I know I could use border:1px solid gray; and border-radius:6px; but the problem…
user1537415
10
votes
5 answers

How to draw an outline around any line

So I have a arbitary line (See an example shown in fig 1) made up of n points I want to draw an outline around this line (see fig 2) so I need to calculate the points of the surrounding polygon. I started by performing a dilation on the line but…
iasksillyquestions
  • 5,558
  • 12
  • 53
  • 75
1
2
3
31 32