How to add input search field with roudned corners?

Your markup is technically correct with the exception of your first line of css. You need to remove the e before the .searchform declaration for it to accept those styles.

The code below is working correctly (see demo here: https://codepen.io/raptorkraine/pen/eyJrJG) however if your input still doesn’t show rounded borders it might be that your styles are being overwritten by another stylesheet.

You can fix this by either declaring your stylesheet after the conflicting one, adding a more specific declaration or adding !important (not recommended).

HTML

<form class="searchform">
    <span>
        <input type="text" class="search rounded" placeholder="Search...">
    </span>    
</form>

CSS

/* Removed the 'e' from this line */
.searchform {
    width: 1000px;
    margin: 0 auto;
    height: 50px;
}

.rounded {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 55px;
}

/* More specific styles (if the above doesn't work) */
form.searchform {
    width: 1000px;
    margin: 0 auto;
    height: 50px;
}

form.searchform input.rounded {
    border-radius: 15px;
}

/* Demo styles to better view border radius */
.searchform {
    background-color: #ccc;
}

.rounded {
    border: 1px solid #000;
}

It’s also worth noting that prefixed border-radius isn’t required and the values are different to the base style. If you insist on using them it’s worth changing them all to 15px or 55px.

Additional

If you’re wanting to use your .light, .lighter & .dark classes I’d change the following code too:

HTML

<input type="text" class="search rounded light" placeholder="Search...">

CSS

/* Replaces: .lighter input[type=text] */
input.lighter {
    border: 1px solid #d0d0d0;
    background-color: #fcfcfc;
}

/* Replaces: .light input[type=text] */
input.light {
    border: 1px solid #acb1b7;
    background-color: #fcfcfc;
}