HTML & CSS

When CSS3 came with the border-radius element, it was like a salvation. The times where creating round corners was made by using graphic files finally come to the end. Damn! What a pain it was when you had to modify something and re-create the graphic file again and again. Today, this torment is over. Take a look how simply you can create beautiful round corners on input boxes, creating interesting effect.

Round-corner search input box

Such a cool effect can be created by applying border-radius on both search input and button elements. One element gets only left borders rounded, the other gets only the right borders rounded, and voila! A few simple lines of the code and we have cool looking search box. No images, no nerves, done in no time.

Here is the code:

HTML

<div style="letter-spacing: 0">
    <input class="search-input" type="search" name="search" placeholder="Enter your search terms...">
    <span class="search-button">search</span>
</div>

CSS

.search-input {
    width: 200px;
    border: 1px solid #B61656;
    border-radius: 5px 0 0 5px;
}    

.search-button {
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    margin-left: -4px; /* Eliminate space between input and button */
    border-radius: 0 5px 5px 0;
    background: linear-gradient(to bottom,  #b61656 0%,#69022c 100%);
}

You can play with it on JSFiddle