Question

I am using cs3pie and facing some issue with it. It’s working but instead of border-radius 160 it’s taking 4 . How can i solve it.

/* Buttons and button links */
    input[type=submit],
    .actions ul li a,
    .actions a {
        font-weight:normal;
        padding: 4px 8px;
        background:  #FDC00D; 
        background-image: -webkit-gradient(linear, left top, left bottom, from(#FDC00D), to(#F68C1E));
        background-image: -webkit-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: -moz-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: -ms-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: -o-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: linear-gradient(top, #FDC00D, #F68C1E);
        -pie-background: linear-gradient(#FDC00D, #F68C1E); /*PIE*/
        color:#333;
        border:1px solid #F69C1E;
        text-decoration: none;
        text-shadow: #ccc 0px 1px 0px;
        min-width: 0;
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-user-select: none;
        user-select: none;
    }
    .actions ul li a:hover,
    .actions a:hover {
        background:  #FDC00D; 
        border-color: #acacac;
        text-decoration: none;
    }
    input[type=submit]:active,
    .actions ul li a:active,
    .actions a:active {
        background: #F68C1E;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#F68C1E), to(#FDC00D));
        background-image: -webkit-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: -moz-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: -ms-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: -o-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: linear-gradient(top, #F68C1E,#FDC00D);
        -pie-background: linear-gradient(#F68C1E,#FDC00D); /*PIE*/

        text-decoration: none;
    }

    input[type=submit],.actions a {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        position:relative;
        z-index: 0;
    }

    /**  Actions  **/
    .actions ul {
        margin: 0;
        padding: 0;
    }
    .actions li {
        margin:0 0 0.5em 0;
        list-style-type: none;
        white-space: nowrap;
        padding: 0;
    }

    .actions ul li a {
        display: block;
        clear: both;    
        -webkit-border-top-right-radius: 161px;
        -webkit-border-bottom-right-radius: 161px;
        -moz-border-radius-topright: 161px;
        -moz-border-radius-bottomright: 161px;
        border-top-right-radius: 161px;
        border-bottom-right-radius: 161px;
        position:relative;
        z-index: 0;
    }

    .actions ul li a:before,.actions ul li a.highlight:hover:before {
        content: "\2665" ; 
        font-size: 18px;
        padding-right:3px;
        color: #16224C; 

    }

    .actions ul li a.highlight:before,.actions ul li a:hover:before {
       color: red; 

    }

    .actions ul.subcategory{
        margin-left:10px;
        display: none;
    }
    .actions ul.subcategory li a {}

This is how i am using pie

<script>
$(function() {
    if (window.PIE) {
        $('.actions ul li a, .actions a, input[type="submit"], .success,.message,.cake-error,p.error,.error-message').each(function() {
            PIE.attach(this);
        });
    }
});

</script>

Answer 1

CSS3PIE only supports short-hand notation.

Excerpt from http://css3pie.com/documentation/known-issues/#shorthand

For all CSS properties which PIE parses, only the shorthand versions
of those properties will be recognized. For example, while
border-radius is supported, the individual longhand
border-top-left-radius etc. properties are not.

The reason for this is the same reason URLs are not resolved relative
to the CSS file (see above): PIE does not have visibility into where
each style property comes from. If there is both a shorthand and a
longhand property present, PIE cannot determine the order in which the
CSS author specified those properties, nor can it determine the
specificity of the selector for each property. It cannot therefore
make an informed decision about which property should take precedence.

To avoid making dumb guesses, we have opted to only support shorthand
properties. Shorthand was chosen over longhand to keep file size small
and avoid tedious repetition.