All geek questions in one place

Css how to get rounded corners on a button.

I have a button with CSS on it, and now it has no rounded corners. I have left and right images (corners), how can I apply them to CSS below? Thanks for any help.

.myButton { background-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; }
+4
source share
6 answers

CSS3 allows you to do this by specifying border-radius instead

http://www.css3.info/preview/rounded-border/

+8
source

The css3 solution will work in all browsers without IE and IE starting from version 9 (next month?).

If you want to increase compatibility with 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.

+2
source

The methods mentioned in other answers are usually related to CSS3, which is not exactly a cross browser. I think you should try using sliding doors . This is a 100% cross browser and will use the angular images that you already have.

+1
source

Use the jQuery round corner plugin.

http://jquery.malsup.com/corner/

It is supported in all browsers, including IE. NECESSARY IMAGES. It draws corners in IE using nested divs (no images). It also has a built-in radius environment in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). Thus, in these browsers, the plugin simply sets the css property.

Here how to use it

You need to include jQuery and Corner js script before </body> . Then write your jQuery as <script>$('div, p').corner('10px');</script> and put it in front of ''. So your html will look like this. Here I am making round corners for all div and p tags. If you want to do this for a specific id or class, 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 out the working example at http://jsfiddle.net/VLPpk/1

+1
source

Others said using border-radius , which is 100% accurate. Here is a small demonstration.

http://jsfiddle.net/TJcGc/

0
source

CSS3 gives you the ability to use rounded corners with border-radius , at times when it’s useful to use the -webkit and -moz provider prefixes, 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 does not support this property. The solution is to use a script like css3pie , which brings css3 properties to Internet explorer.

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

0
source

Source: https://habr.com/ru/post/1341701/

More articles:


All Articles