GeekInterview.com
Results 1 to 2 of 2

Rounded corner in HTML

This is a discussion on Rounded corner in HTML within the Web Development forums, part of the category; Can anyone please tell me that how to make dynamic rounded corner rectangle ? You can view the demo when u type your queries in box that is slightly rounded ...

  1. #1
    ManojGahlot is offline Junior Member Array
    Join Date
    Feb 2010
    Answers
    9

    Question Rounded corner in HTML

    Can anyone please tell me that how to make dynamic rounded corner rectangle ?
    You can view the demo when u type your queries in box that is slightly rounded corner so please tell how to make & I need it as dynamic bcoz my values are not fixed.
    Regards...


  2. #2
    Sandhya.Kishan is offline Expert Member Array
    Join Date
    Mar 2012
    Answers
    212

    Re: Rounded corner in HTML

    The border-radius property of css offers a clean and easy way of adding rounded corners to elements on the page. The rounded corner look can be applied to any or all four corners of an element.

    Syntax:
    * -moz-border-radius: value
    * -webkit-border-radius: value

    "-webkit-" version is used by both Safari and Chrome,we should define both properties to cover the bases while browsers move to support the official version. "value" in this case can be a singular value (ie: 10px) that defines the radius of the border for all 4 corners.example:
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

    We can also specify Individual border radius properties,like
    * -moz-border-radius-topleft
    * -moz-border-radius-topright
    * -moz-border-radius-bottomright
    * -moz-border-radius-bottomleft



    * -webkit-border-top-left-radius
    * -webkit-border-top-right-radius
    * -webkit-border-bottom-right-radius
    * -webkit-border-bottom-left-radius

    In Firefox, the -moz-border-radius property act as a shorthand property to all 4 individual border radius properties. Simply enter 4 separate values to affect each of the 4 corners. Safari unfortunately does not yet support such a shorthand.
    Example: -moz-border-radius: 9px 3px 9px 3px;
    -webkit-border-top-left-radius:9px
    -webkit-border-top-right-radius:3px
    -webkit-border-bottom-right-radius:9px
    -webkit-border-bottom-left-radius:3px