CSS3 - Border


Korištenje CSS3 border-a

CSS3 nudi dva nova svojstva za elegantniji stil granice elementa - svojstvo border-image za dodavanje granice oko slika i svojstvo border-radius za pravljenje zaobljenih uglova bez upotrebe bilo kakvih slika. Sljedeći dio opisaće vam ova nova svojstva boreder-a CSS3-a, za ostala svojstva povezana s oblicima pogledajte lekciju CSS boreder.



Kreiranje CSS3 zaobljenih uglova

Svojstvo border-radius može se koristiti za stvaranje zaobljenih uglova. Ovo svojstvo obično definiše oblik ugla vanjske granice boreder-a. Prije CSS3, izrezane slike koristile su se za stvaranje zaobljenih uglova što je prilično komplikovano bilo.

.box {
    width: 300px;
    height: 150px;
    background: #ffb6c1;
    border: 2px solid #f08080;
    border-radius: 20px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 zaobljenih uglova</title>
<style>
  .box {
    width: 300px;
    height: 150px;
    background: #ffb6c1;
    border: 2px solid #f08080;
    border-radius: 20px;
  }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>


Dodavanje CSS3 boreder-a slici

Svojstvo border-image omogućava vam da odredite sliku koja će djelovati kao granica elementa. Dizajn boreder kreira se sa stranica i uglova slike navedene u URL-u izvora border-image. Granična slika može se izrezati, ponoviti, prilagoditi i razvući na razne načine kako bi odgovarala veličini područja granične slike.

.box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("border.png") 30 30 round;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 border slike</title>
<style>
  .box {
    width: 300px;
    height: 150px;
    border: 15px solid transparent;
    -webkit-border-image: url("images/border.png") 30 30 round; /* Safari 3.1-5 */
    -o-border-image: url("images/border.png") 30 30 round; /* Opera 11-12.1 */
    border-image: url("images/border.png") 30 30 round;
  }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>