How to set multiple values for the css property outline?

Question

I am using IE11 to render one of my dialog boxes, so along with the default dotted border which is the existing style for the button in focus, is there anyway I could add one more value for the outline attribute like below:

input[type=button]:focus{
  outline: 1px solid;
}

Adding it this way is actually replacing the default outline value which is set by IE so I just wanted to know if getting both is possible.

Thanks.

Answer 1

Outline has some degree of customization, you can even have double borders.

This MDN page has some nice examples of the different styles you can have.

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

<button style="outline: thick double #32a1ce;">Foo</button>

<button style="outline: 8px ridge rgba(170, 50, 220, .6);">Foo</button>

Answer 2

outline can take till 3 properties which are similar as border.

 outline-width
 outline-style
 outline-color

I tested it in all browser and it seems to work fine:

input[type=button]:focus{
  outline: 8px solid rgba(170, 50, 220, .6);
}

<input type="button" name="submit" value="submit">