CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mls Tod
Mls Tod

Reputation: 61

How to add border-corner-radius only on left side of the button with jquery-ui-1.9.2.custom?

I have this code in my HTML:

<div id="ot-lang-src">
<button id="rerun"></button>
<button id="select">Choose a language</button>
<ul id="ui-menu-left">                                                      
</ul>
</div>

I use jquery-ui-1.9.2.custom I have downloaded. Problem is with border-radius. I'm trying to add border radius only on left side of the button. Border on right side stays 0px.

Jquery-ui-1.9.2.custom.js added .ui-corner-all class to button on page load which means border for all four corner is 2px. I tried to remove .ui-corner-all class and to add .ui-corner-left class:

$("button#rerun").removeClass("ui-corner-all").addClass("ui-corner-left");

and it doesn't work. I have this code in jquery-ui-1.9.2.custom.css:

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; -khtml-border-top-left-radius: 2px; border-top-left-radius: 2px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; -khtml-border-top-right-radius: 2px; border-top-right-radius: 2px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; -khtml-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; -khtml-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }

Is this right way to solve this problem, and how to remove .ui-corner-all class? Is it better way for this issue?

Thanks!

Upvotes: 0

Views: 3570

Answers (3)

Milad Rashidi
Milad Rashidi

Reputation: 1376

You need to set border-radius property same as this rule:

border-radius: top-left top-right bottom-right bottom-left;

For example:

border-radius: 0px 10px 20px 30px;
-ms-border-radius: 0px 10px 20px 30px;  /* For make it compatible with IE 8 */

If you added reference of jQuery to your page you can do exactly as same as what I done in here Changing border radius customizable

Upvotes: 0

Rama Schneider
Rama Schneider

Reputation: 64

I would suggest adding your own class to the button and make sure the CSS that defines that class is loaded after the JQuery UI CSS definitions.

Upvotes: 0

McRui
McRui

Reputation: 1955

Increase the corner radius to, for instance 8px, and you'll probably notice that it works. Fiddle test here

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    -moz-border-radius-top-left: 8px;
    -webkit-border-top-left-radius: 8px;
    -khtml-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
}

Upvotes: 0

Related Questions