توپر

خط‌چین

نقطه‌چین

دوخطه

border-radius: 10px;

کمی گرد

border-radius: 30px;

خیلی گرد

border-radius: 50%;

دایره کامل

5px 5px 10px

سایه معمولی

0 10px 20px pink

سایه رنگی

inset 0 0 20px

سایه داخلی

تمرین ۱: کارت پروفایل ساده

<div class="profile-card">
    <div class="avatar"></div>
    <h2>مریم منفرد</h2>
    <p>توسعه‌دهنده وب</p>
    <button>مشاهده پروفایل</button>
</div>

/* CSS مورد نیاز */
.profile-card {
    border: 2px solid #e1e1e1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 30px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    border: 3px solid #667eea;
    border-radius: 50%;
    margin: 0 auto 20px;
}

button {
    border: none;
    border-radius: 50px;
    box-shadow: 0 5px 15px #667eea80;
    padding: 12px 30px;
}

✅ خروجی تمرین ۱:

تمرین ۲: گالری تصاویر با حاشیه‌های متنوع

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.img1 { border: 5px solid #667eea; border-radius: 10px; box-shadow: 5px 5px 15px #667eea; }
.img2 { border: 3px dashed #764ba2; border-radius: 30px 10px; box-shadow: 0 10px 20px #764ba2; }
.img3 { border: 8px double #f093fb; border-radius: 50%; box-shadow: inset 0 0 20px #f093fb; }
.img4 { border: 4px dotted #ff9aa2; border-radius: 10px 50px; box-shadow: 10px 10px 0 #ff9aa2; }

✅ خروجی تمرین ۲:

پروژه نهایی: کارت محصول فروشگاهی

.product-card {
    border: 1px solid #e1e1e1;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(102,126,234,0.2);
    transition: all 0.3s;
}

.product-card:hover {
    box-shadow: 0 25px 45px rgba(102,126,234,0.4);
    transform: translateY(-5px);
}

.product-image {
    border-radius: 20px 20px 0 0;
    border-bottom: 3px dashed #667eea;
}

.price {
    background: #667eea20;
    border-radius: 50px;
    border: 2px solid #667eea;
}

.discount-badge {
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(240,147,251,0.5);
}

✅ خروجی پروژه نهایی:

border

ایجاد حاشیه با عرض، رنگ و سبک مختلف

border-radius

گرد کردن گوشه‌ها تا تبدیل به دایره

box-shadow

ایجاد سایه داخلی و خارجی