INPUT Styling for "In Focus" Objects?

[AtomicAnomaly]

I'm experienced, yet still a "beginner" in web-development, so I ask: How do I adjust the the radius of the outline of an "in focus" input object to match it's border-radius value?

/*Input field style*/input {    display: block;    border: 1px solid #aaaaaa;    border-radius: 2px;    padding: 12px;    font-size: 18px;    font-family: Sansation;    margin-left: auto;    margin-right: auto;    margin-bottom: 5px;}/*Input field focus style*/input:focus {    outline: 2px solid #28c789;    /* Outline Radius Value? */}

 

I do apologize for my ignorance on the subject, but I figure there must be a way.

 

Thank you!

Edited March 4, 2015 by AtomicAnomaly

[Ingolme]

It doesn't look like the outline can have a radius. I looked it up and found this: http://stackoverflow.com/questions/5394116/outline-radius

 

You could hide the outline and show a border instead.

[tejasamrute]

input:focus {    outline:none;    border:none;    box-shadow: 0 0 5px 5px red;}

Try this....

[AtomicAnomaly]

Inglome: I had previously found the same thread, and found it a tad confusing, but I appreciate the help!

 

Tezzo: I think I liked the outcome of your suggestion better than my rounded outline plan.

 

Thank you both for your help!