css how to get rounded corners on button.
I have a button with CSS on it and it has no rounded corners right now. I have the left and right images (corners) how can i apply them to the CSS below? Thanks for any help.
.myButton
{
backgrou开发者_StackOverflow社区nd-image: url(../../Images/SubmitButtonBack.png);
color: White;
font-family: Verdana;
font-weight: bold;
font-size: 8pt;
width: 160px;
height: 22px;
border: none;
position: relative;
cursor: pointer;
margin-bottom:5px;
}
CSS3 allows you to do this by specifying a border-radius instead
http://www.css3.info/preview/rounded-border/
A css3 solution will work in all non-IE browsers and IE starting from version 9 (next month?).
If you want to bump up the compatibility to IE8, you can use :before and :after:
.myButton:before {
content: url(/path/to/left_image);
}
.myButton:after{
content: url(/path/to/right_image);
}
If IE8 is not good enough, you should use @Wolfy87's answer.
The methods mentioned in the other answers seem to mostly involve CSS3, which is not exactly cross browser. I think you should try using the sliding doors technique. It is 100% cross browser and will use the corner images you already have.
Use jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. NO IMAGES REQUIRED. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like <script>$('div, p').corner('10px');</script> and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
The others have said to use border-radius which is 100% accurate. Here is a small demo.
http://jsfiddle.net/TJcGc/
CSS3 gives you the ability to use rounded corners with border-radius, at the moments it's good to use the vendor prefixes -webkit and -moz, something like the following:
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
Keep in mind that internet explorer doesn't support this property. A solution is to use a script like css3pie that brings css3 properties to internet explorer.
Demo: http://jsfiddle.net/sUegC/1
加载中,请稍侯......
精彩评论