Wednesday, 15 August 2012

Previous Interview Question Next Interview Question
Home

CSS Round Corner / Border code with Cross browser compatibility


Rounded corners can be done with CSS currently for all browsers, except Internet Explorer.
.roundedBordersAll {
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    }

Sometimes we need only several corners to be rounded. Full code for each rounded border follows:
.fullSynthax {
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -khtml-border-radius-bottomright: 8px;
    -khtml-border-radius-bottomleft: 8px;
    -khtml-border-radius-topright: 8px;
    -khtml-border-radius-topleft: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

Previous Interview Question Next Interview Question
Home

0 comments :

Post a Comment