CSS Kā izveidot rāmim noapalotus stūrus

Tātad, pats atribūts, kas nepieciešams apaļajiem stūriem ir border-radius.
Pavisam vienkārš piemērs būtu šāds:

Kods:

#example {
        border-radius: 10px;
 }

Šādi mēs panākam, ka elementam ar id example tiek noapaļoti stūri, un stūru rādius ir 10 pikseļi.

Lai panāktu šo efektu uz vecākām FireFox un WebKit bāzētu pārlūku versijām, klāt ieteicams likt sekojošo:

Kods:

#example {
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
 }

Lai panāktu noteikta stūra noapaļojumu, lieto:
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
Tāpat kā border-radius, arī šiem atribūtiem var lietot prefiksus -moz
vai -webkit. Tiesa, šajā gadījumā atribūti ar -moz prefiksu nedaudz
atšķirsies:
-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomright
-moz-border-radius-bottomleft
Lai noapaļotu, piemēram, kreiso augšējo stūri, izmantojam sekojošo kodu:

Kods:

#example {
        border-top-left-radius: 10px;
        -moz-border-radius-topleft: 10px;
        -webkit-border-top-left-radius: 10px;
 }

Tas arī īsumā viss.