# \[CSS\] rounded corners

**URL:** <https://forum.kirupa.com/t/css-rounded-corners/243172>\
**Category:** web dev\
**Created:** [November 3, 2007, 8:21pm UTC](https://forum.kirupa.com/t/css-rounded-corners/243172 "2007-11-03T20:21:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [November 3, 2007, 8:21pm UTC](https://forum.kirupa.com/t/css-rounded-corners/243172/1 "2007-11-03T20:21:18Z")

</div>

![](http://forum.kirupa.com/uploads/kirupa/4114/bba912ced18a41c7.jpg)

What’s the most _efficient_ way to code rounded corners in CSS? I know the _easiest_ way is to just create 3 DIV’s. But this can make the HTML very sloppy. Is is there some cool convenient way to do it where you you can apply multiple backgrounds to a single DIV? Like:

.myDIV  
{  
background1: url(‘middle.gif’) z-index=1;  
background2: url(‘leftRounded.gif’) align=left no-repeat z-index=2;  
background3: url(‘rightRounded.gif’) align=right no-repeat z-index=3;  
}