0

Duplicate:

Do you know a way to make rounded borders to div elements. I used ruzee but i got problem to use CalenderExtender(asp.net ajax) and GMDatePicker components.

Community
  • 1
  • 1
uzay95
  • 16,052
  • 31
  • 116
  • 182

3 Answers3

4

In CSS 3 there will be a standard for that. Today you can do it (only for Mozilla and Webkit based browsers) with:

.roundBorder {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
}

Otherwise you can use multiple divs with backgound-images, but JQuery will provide a more simple way (that I don't know about :()

The multiple div way could look something like this:

html:

<div class="topLeft">
    <div class="topRight">
        <div class="bottomLeft">
            <div class="bottomRight">
                 <div class="content">
                 </div>
            </div>
        </div>
    </div>
</div>

css:

.topLeft {
    background-image: url('topLeft.png');
    background-position: top left;
    background-repeat: no-repeat;
}

.topRight {
    background-image: url('topRight.png');
    background-position: top right;
    background-repeat: no-repeat;
}

.bottomLeft {
    background-image: url('bottomLeft.png');
    background-position: bottom left;
    background-repeat: no-repeat;
}

.bottomRight {
    background-image: url('bottomRight.png');
    background-position: bottom right;
    background-repeat: no-repeat;
}
Kevin Dungs
  • 1,555
  • 1
  • 13
  • 18
  • What does your question refer to? If you asked about [...]-border-radius: Since this is only working with mozilla or webkit it wont work for IE (neither for opera). If you asked about the second part (the stacked divs): this should work in every common browser. – Kevin Dungs Jun 02 '09 at 18:18
1

You could use the CSS3 border-radius property, but this isn't supported in IE yet.

Absolut40
  • 61
  • 5
1

for JQuery, you could use 'Corner'. See here

Fortega
  • 19,463
  • 14
  • 75
  • 113