CODEWITHSUNDEEP
htmlcss
user2801836
user2801836

Reputation:

Text input top and left border appears wrong

I have a text input but the color is not right on top and left border, why is this, and how can I fix this?

http://jsfiddle.net/9ehBs/

HTML

<input type="text" class="searchbox" />

CSS

.searchbox
{
    width: 200px;
    height: 30px;
    padding: 10px;
    font-size: 28px;
    font-weight: 900;
    font-family: Ebrima;
    color: rgb(54,54,54);
    border-width: 13px;
    border-color: rgb(46,94,115);
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

Upvotes: 3

Views: 1012

Answers (3)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

.searchbox
{
    width: 200px;
    height: 30px;
    padding: 10px;
    font-size: 28px;
    font-weight: 900;
    font-family: Ebrima;
    color: rgb(54,54,54);
    border-width: 13px;
    border-style: solid;/* add this to your css options: dotted | solid | dashed */
    border-color: rgb(46,94,115);
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

shorthand writing:

margin: 10px 0 0 10px; /*(top, right and left, bottom)*/
border:13px solid rgb(46,94,115);

...instead of

margin-left: 10px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;


border-width: 13px;
border-style: solid;/* add this to your css options: dotted | solid | dashed */
border-color: rgb(46,94,115);

Upvotes: 0

theftprevention
theftprevention

Reputation: 5213

You need border-style: solid. See your updated fiddle.

It would be much more efficient to use the shorthand, i.e. border: 13px solid rgb(46,94,115);

Upvotes: 4

M.Svrcek
M.Svrcek

Reputation: 5635

border: 13px solid rgb(46,94,115);

easier in one row ... hope it helps

Upvotes: 1

Related Questions