Borders (rámečky) - Český CSS3 manuál

S nástupem CSS3 můžete využívat zakulacených rámečků, přidat vlastní stín nebo i jako rámeček použít obrázek bez užití grafických programů.

Obecně - Podpora prohlížečů

• IE9 podporuje jen velmi málo nových vlastností
• U ostatních prohlížečů je vyžadován prefix
  • Firefox -moz-vlastnost
  • Chrome, Safari -webkit-vlastnost
  • Opera -o-vlastnost
    • IE9 -ms-vlastnost

CSS3 Zaoblené rohy (border-radius)

Příkladné použití na divu:

div
{
    border: 2px solid;
    border-radius: 25px;
}

CSS3 Vržení stínu (box-shadow)

Příkladné použití na divu:

div
{
    box-shadow: 10px 10px 5px #888888;
}

CSS3 Obrázek jako rámeček (border-image)

Příkladné použití pro div s rozkopírováním obrázku okolo.

div
{
    border-image: url(ramecek.png) 30 30 round;
    -moz-border-image: url(ramecek.png) 30 30 round; /* Firefox */
    -webkit-border-image: url(ramecek.png) 30 30 round; /* Safari a Chrome */
    -o-border-image: url(ramecek.png) 30 30 round; /* Opera */
}