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!
CSS3 rounded corner textbox with style
45.5k views Asked by user2074113 At
4
There are 4 answers
1
On
<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
1
On
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
1
On
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>
The trick is to use
box-shadowmultiple times: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.