CODEWITHSUNDEEP
csstextboxrounded-cornersroundedcorners-dropshadow
user2074113
user2074113

Reputation: 97

CSS3 rounded corner textbox with style

Im a newbie of css3, although there are a lot of css tool generators outhere, i dont't know how to code this image i provide. Kindly help please??..This will benefit my assignment on one of my major subject. Thanks a lot!

enter image description here

Upvotes: 3

Views: 47062

Answers (4)

Thoppil
Thoppil

Reputation: 54

<input type="text"  placeholder="Your Name" style="text-align:center; color:white; background:black;  border-radius:50px; height:30;" />
<input type="email"  placeholder="Enter your email id" style="text-align:center; color:white;  background:black;  border-radius:50px 5px 50px; height:30;" />

Seccond textbox in Different style

Upvotes: 1

Rn.
Rn.

Reputation: 167

Try this 

 <html>
        <html>
        <head>
        <style type="text/css"> 
        .tbox
{
border:2px solid #b3b3b3;
background:#dddddd;
width:200px;
border-radius:25px;
-moz-border-radius:25px; 
-moz-box-shadow:    1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
 box-shadow:         1px 2px 2px 2px #ccc;
}
        </style>
        </head>
        <body>

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

        </body>
        </html>

Upvotes: 1

Blender
Blender

Reputation: 298206

The trick is to use box-shadow multiple times:

box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px black;

enter image description here

Demo: http://jsfiddle.net/wUgXk/1/

If you're on Google Chrome, open up Inspector, click on one of the values (4px, for instance) and press your Up and Down keys. You can tweak the values in real time and setup these kinds of effects pretty quickly.

Upvotes: 2

Simon Sebastian Vollmer
Simon Sebastian Vollmer

Reputation: 710

it's very simple in CSS to round the corners of a div use 'border-radius' CSS property on the div tag and place the image within it.

Your HTML will look like this:

<div id=image_box>
<img src='someimagelocation'>
</div>

You will then want to set the size of the dive to the exact width and height of the image and ensure that overflow is set to hidden and that your border radius property is set:

#image_box {
width:200px;
height:150px;
overflow: hidden;
border-radius:0.5em;
}

this should give you your desired result!

ADDED:

To add dropshadow etc, use the CSS property 'box-shadow' in the same div CSS tag.

box-shadow:0 1px 2px #aaa;

You will need to google how these syntax work. But I have given you all the necessary tools to research it very easily

Upvotes: 6

Related Questions