css - How do I Add border to text in inputfield -

i'm trying find out how can customize text in input field css. want add border text written in input field.

i can customize font-family, font-size "input" in css when add border applies on input field.

jsfiddle trying explain mean

<input type="text" placeholder="add border text" />  body {   background-color: #ccc; }  input {   border: 1px solid #000   width: 200px;   padding: 20px;   font-size: 20px; } 

i've tried searching didn't find useful, i'm sure easy , can me.

thank you

edit: i'm trying text in input field this: http://i.imgur.com/zmbphb1.png

notice have put id attribute on input: id="myinput"

    <input id="myinput" type="text" placeholder="add border text" /> ... , not inputwindow itself. 

and css below. notice #myinput::-webkit-input-placeholder. #myinput targets input box, , webkit bit google..moz firefox, , ms-input-placeholder internet explorer:

body {     background-color: #ccc; }  input {     border: 1px solid #000     width: 200px;     padding: 20px;         font-size: 20px; }   #myinput::-webkit-input-placeholder {   border-style:solid; border-width:medium; } #myinput:-moz-placeholder {  border-style:solid; border-width:medium; } #myinput:-ms-input-placeholder {  border-style:solid; border-width:medium; } 

to change font of placeholder text stroke, try this:

#myinput::-webkit-input-placeholder {  color: white;     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;  } #myinput:-moz-placeholder { color: white;     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } #myinput:-ms-input-placeholder { color: white;     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }