מספר שאלות על CSS

[DiXXOver]

מספר שאלות על CSS:
1. יצרתי DIV הגדרתי לו גובה משתנה ורוחב קבוע, עם רקע בצבע אדום. עכשיו אני רוצה לעגל את הפינות במקום ריבוע חשבתי לשים תמונות עגולות של צבע אדום על רקע שחור [רקע של הדף].

#x1{width:12px; height:10px; position:absolute;left: 0px;top: 0px;background:url(../images/x1.jpg) no-repeat;}
#x2{width:12px; height:10px; position:absolute;right: 0px;top: 0px;background:url(../images/x2.jpg) no-repeat;}
#x3{width:12px; height:10px; position:absolute;left: 0px;bottom: 0px;background:url(../images/x3.jpg) no-repeat;}
#x4{width:12px; height:10px; position:absolute;right: 0px;bottom: 0px;background:url(../images/x4.jpg) no-repeat;}

בקוד ניתן לראות את ארבעת התמונות שלי [פינות].
ובדף HTML הכנסתי את הקוד הבא:

<div id="x1"></div><div id="x2"></div><div id="x3"></div><div id="x4"></div>

השאלה שלי היא איך אני עושה כדי שאוכל לאכלס את ארבעת ה-ID האלה לתוך ID אחד, כדי שכשארשום את אותו ה-DIV הראה את ארבעת התמונות, כל אחת במיקום שלה במקום המצב הנוכחי שבו אני רושם ארבע DIV-ים שונים?


2. הדף הראשי שלי כולו נשען על CSS. הבעיה שמטרידה אותי היא שהקוד של ה-CSS ענקי לעומת הקוד של ה-HTML אם הייתי מעצבן הכל ב-HTML רגיל, כלומר טבלות רגילות במקום ב-DIV. הבאר מתחת ללוגו כולו חתוך ב-DIV-ים כלומר לקחתי תמונה כפולה החלק העליון של התמונה זה מה שהמשתמש אמור לראות החלק התחתון זה מה שהמשתמש רואה כשהוא מעביר את העכבר מעל הכפתורים. כל כפתור אצלי הוא ID, ובגלל זה צריך להגדיר לו תמיד את הרוחב והגובה והמיקום שלו לעומת ה-DIV הראשי..
השאלה שלי היאת האם זה נכון? האם עדיף לקחת תמונה של באר שנטענת כשהדף עולה, ואז למשוך מתוכה כפתורים, או שעדיף לחתוך את התמונה לתמונות קטנות ולשים כל אחת כתמונה מפני עצמה?

מקווה שהבנתם אם לא אוכל להביא דוגמאות..תודה.