Geek Answers Handbook

CSS3 Rounded corner for input element without js / images

Who can I make a rounded corner for input elements?

I need a way without using javascript and images.

Added:

<!DOCTYPE html>
<html>
<head>    
    <title>xx</title>
<style type="text/css">
input
{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}
</style>
</head>
<body>
<input type="text" value="test" />
</body>
</html>

It does not work in firefox 3.6.12!

+5
source share
4 answers

There are many new features in CSS3 that benefit web designers. This includes rounding borders:

input
{
    -webkit-border-radius: 5px; //For Safari, etc.
    -moz-border-radius: 5px; //For Mozilla, etc.
    border-radius: 5px; //CSS3 Feature
}

You can add a class to your input fields and use this class in this CSS snippet to target specific input elements.

Internet Explorer 8 does not support CSS3. Internet Explorer 9, I hope, will include all of its features.

Regarding your edited question:

"text/css/"should be "text/css".

+12

CSS:

input {
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
}

, , .

, IE.

, , , - () IE (. ), (b), <style> type. , type; ( ). , , .

IE :

CSS3 IE - CSS3Pie.

IE- IE, CSS Behaviors. , , IE, .HTC, .

IE VML, .

, , , , , .

CSS Behaviors Javascript - , Javascript - ( ), MS- HTC, , CSS3 - javascript.

, , IE, Javascript, , . , .

+5

, ( ) :

<style type="text/css/">
                    ^^^ this / shouldn't be there

Note that rounding angles will not work in IE css with you, to achieve this you need to take a look at http://css3pie.com/ or use images / jsvascript.

+2
source

CSS 3 will help you.

This style sheet also works for input elements [in modern browsers at least], although it has not been tested in IE

 border-radius: 16px; /* half of button size + padding */
-moz-border-radius: 16px;
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa));
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);
0
source

More articles:


All Articles