How could I implement this input border in CSS?

How could I implement this border on a input field in css?

I think there are many ways to do it but what would you recommend?

I don’t see an image there. Could you post it as an attachment?

Sorry here it is

Hi,

For ie9 and other modern browsers you could use border-radius and box shadow.

e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
input[type=text] {
	width:293px;
	padding:5px 10px;
	margin:0;
	border:1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 3px 3px #cccccc;
	-moz-box-shadow: 0px 0px 3px 3px #cccccc;
	box-shadow: 0px 0px 3px 3px #cccccc;
	vertical-align:middle;
	-webkit-background-clip: padding-box;
	background-clip:padding-box;
}
label {
	width:100px;
	padding:0 10px 0 0;
	display:inline-block;
	vertical-align:middle;
	text-align:right;
}
</style>
</head>

<body>
<form name="form1" method="post" action="">
		<fieldset>
				<legend>Input test</legend>
				<label for="name">Name:</label>
				<input type="text" name="name" id="name">
		</fieldset>
</form>
</body>
</html>

If you want ie8 and under support then you’d need to use a background image instead. Wrap a span around the input and make the span display:inline-block (and size it to match the input height and width) and then apply a background image to it. Next set the input to the same height and width and remove padding,margins, backgrounds and borders from the input.

Thanks paul. Though not exact, the css you gave me is very close

EDIT: With a bit of modifying I can make it almost the exact same except the original has weird corners which I don’t think I can replicate using css

Glad you got it working :slight_smile:

I didn’t really see in any weird corners in the drawing they just looked like a 2 or 3 pixel border radius to me.