Skraćeno pisanje svojstva, omogućava promjenu svih svojstava obruba, za sve četiri stranice html elementa, uporabom samo jednog css svojstva: border.
border: [border-width] [border-style] [border-color];
Uporabom css svojstva border, uvijek mijenjate oblikovanje širine, stila i boje obruba sve četiri stranice elementa.
p {
border: 5px solid blue;
}
Isto oblikovanje sve četiri stranice možemo dobiti - dužim načinom - uporabom pojedinačnih css svojstava:
p {
border-width: 5px;
border-style: solid;
border-color: blue;
}
U prethodnim primjerima, mijenjali smo obrub za sve četiri stranice html elementa. Ponekad želimo promijeniti obrub, samo jedne stranice.
U slijedećem primjeru, svaki redak služi oblikovanju obruba jedne stranice html elementa. U našem stilskom pravilu, uporabit ćemo samo oblikovanja za stranice koje želimo promijeniti, ostala css svojstva iz primjera ne navodimo.
p {
border-top: 5px solid red; /* određuje obrub, samo gornjeg obruba */
border-right: 2px dotted white; /* određuje obrub, samo desnog obruba */
border-bottom: 5px; solid blue; /* određuje obrub, samo donjeg obruba */
border-left: 2px dashed green; /* određuje obrub, samo lijevog obruba */
}
Svako od ovih oblikovanja možemo dobiti i - dužim načinom - uporabom pojedinačnih css svojstava. Tako je za css svojstvo border-left, duži način pisanja glasi:
p {
border-left-width: 5px;
border-left-style: solid;
border-left-color: blue;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS obrub (engl. border)</title>
<style>
/* css dio koji oblikuje izgled stranice bez obruba */
* {
padding: 0; /* pomoću univerzalnog selektora dodjeljujemo */
margin: 0; /* vrijednosti svih odmaka i rubnica na nulu */
}
body {
font-size: 20px; /* veličina slova odlomka, ostali razmjerno veci */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section {
display: grid; /* najmanja širina stupca 500px */
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
}
article {
color: chocolate; /* boja teksta svih potomaka elemenata article */
margin: 10px; /* rubnica svakog elementa article */
padding: 10px; /* odmak svakog elementa article */
}
h1, h2, p {
font-weight: 100; /* debljina slova h1, h2 i p */
margin: 10px; /* rubnica elemenata h1, h2 i p */
padding: 20px; /* odmak elemenata h1, h2 i p */
}
h2 {
width: 100px; /* širina naslova h2 */
text-align: center; /* vodoravno poravnje */
}
/* dio vezan za css svojstvo border */
article {
border: 2px solid fuchsia;
}
.box-2020 h2 {
border: 2px dotted red;
}
.box-2021 h2 {
border-top: medium dotted chartreuse;
border-right: 10px double fuchsia;
}
.box-2022 h2 {
border-right: 10px groove gold;
border-bottom: 5px solid lawngreen;
border-left: 10px groove gold;
}
.box-2023 h2 {
border-top: thin solid darkgray;
border-right: thin solid darkgray;
border-bottom: thin solid darkgray;
border-left: 15px solid fuchsia;
}
p {
border: thin double saddlebrown;
}
</style>
</head>
<body>
<h1>Bartol plus - obrub</h1>
<section>
<article class="box-2020">
<h2>2020</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2021">
<h2>2021</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2022">
<h2>2022</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2023">
<h2>2023</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
</section>
</body>
</html>CSS svojstvo border-style određuje stil crte koji koristimo za sve četiri stranice obruba.
Dopuštene su slijedeće vrijednosti css svojstva border-style:
solid: Puna. neprekidna crta.
none: (zadano) Ne prikazuje crtu. Ova vrijednost je zadana.
hidden: Crta je povućena, no ne prikazuje se.
dashed: Crtkana crta.
dotted: Točkasta crta.
double: Dvostruka crta.
groove: Dodaju se boje, tako da element izgleda kao da je utisnut u dokument.
groove: Dodaju se boje, tako da element izgleda kao da je izdignut iz dokumenta.
inset: Dodaje boji nijansu, tako da element izgleda kao da je neznatno utisnut.
outset: Dodaje boji nijansu, tako da element izgleda kao da je neznatno izdignut.
Učinak vrijednosti: groove, ridge, inset i outset ovise o vrijednosti svojstva border-color.
none i hidden, u čemu je razlika?Vrijednosti stila obruba none i hidden imaju isti učinak, osim u slučaju kada označavaju obrube unutar tablice, gdje dvije ćelije dijele zajednički obrub, a među ćelijama tablice je postavljeno rušenje obruba (border-collapse:collapse;).
obrub nije vidljiv, zašto?Ako nismo dodijeliti vrijednost css svojstvu border-style, bez obzira na dodjeljivanje vrijednosti ostalim svojstvima obruba (border-width, border-color i border-radius) obrub ne će biti vidljiv. Razlog je u tome što je zadana vrijednost css svojstva border-style jednaka none, što znači da se obrub ne prikazuje.
Uporabom css svojstva border-style, uvijek mijenjamo stil obruba za sve četiri stranice elementa, neovisno koliko smo mu vrijednosti dodijelili!
Css svojstvu border-style možemo dodijeliti, od jedne do četiri vrijednosti, gdje svaka vrijednost označava stil obruba jedne stranice html elementa.
Redoslijed navođenja vrijednosti stila obruba je slijedeći: najprije vrijednost stila gornje (engl. top), zatim desne (engl. right), donje (engl. bottom) i na kraju lijeve (engl. left) stranice. Pogledajte sliku 1.
Kada css svojstvu border-style dodijelimo samo jednu vrijednost, navedeni stil će se primijeniti na sve četiri stranice.
Kada navedemo dvije vrijednosti, tada se dodijeljene vrijednosti stila obruba nasuprotnih stranica - gornje i desne - preslikavaju u nedodijeljene vrijednosti stila obruba, donje i lijeve stranice.
Kada navedemo tri vrijednosti, tada se dodijeljena vrijednost stila obruba nasuprotne stranice - desne - preslikava u nedodijeljenu vrijednosti stila obruba, lijeve stranice.
border-style: solid;
/* isto kao: border-style: solid solid solid solid; */
/* skraćuje pojedinačno pisanje: */
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-style: solid dotted;
/* isto kao: border-style: solid dotted solid dotted; */
border-style: solid dotted dashed;
/* isto kao: border-style: solid dotted dashed dotted; */
border-style: solid dotted none dashed;
/* dodijeljeni su stilovi obruba za sve četiri stranice */
/* skraćuje pojedinačno pisanje: */
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: none;
border-left-style: dashed;
U prethodnim primjerima, mijenjali smo stil obruba za sve četiri stranice html elementa. Ponekad želimo promijeniti stil, samo jedne stranice.
U slijedećem primjeru, svaki redak služi oblikovanju stila obruba jedne stranice html elementa. U našem stilskom pravilu, uporabit ćemo samo oblikovanja za stranice koje želimo promijeniti, ostala css svojstva iz primjera ne navodimo.
p {
border-top-style: dotted; /* određuje stil, samo gornjeg obruba */
border-right-style: solid; /* određuje stil, samo desnog obruba */
border-bottom-style: dotted; /* određuje stil, samo donjeg obruba */
border-left-style: solid; /* određuje stil, samo lijevog obruba */
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS stil obruba (engl. border style)</title>
<style>
/* css dio koji oblikuje izgled stranice bez stila obruba */
* {
padding: 0; /* pomoću univerzalnog selektora dodjeljujemo */
margin: 0; /* vrijednosti svih odmaka i rubnica na nulu */
}
body {
font-size: 20px; /* veličina slova odlomka, ostali razmjerno veci */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section {
display: grid; /* najmanja širina stupca 500px */
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
}
article {
color: chocolate; /* boja teksta svih potomaka elemenata article */
margin: 10px; /* rubnica svakog elementa article */
padding: 10px; /* odmak svakog elementa article */
border-width: 3px; /* debljina obruba elemenata article */
}
h1, h2, p {
font-weight: 100; /* debljina slova h1, h2 i p */
margin: 10px; /* rubnica elemenata h1, h2 i p */
padding: 20px; /* odmak elemenata h1, h2 i p */
}
h2 {
width: 100px; /* širina naslova h2 */
text-align: center; /* vodoravno poravnje */
}
/* ovaj dio odnosi se na css svojstvo border-style */
article {
border-style: solid;
}
.box-2020 h2 {
border-style: solid;
}
.box-2021 h2 {
border-style: dotted solid;
}
.box-2022 h2 {
border-style: solid dotted dashed;
}
.box-2023 h2 {
border-style: double none dashed solid;
}
.box-2020 p {
border-left-style: groove;
}
.box-2021 p {
border-top-style: outset;
border-right-style: inset;
}
.box-2022 p {
border-right-style: groove;
border-bottom-style: ridge;
border-left-style: inherit;
}
.box-2023 p {
border-top-style: inset;
border-right-style: outset;
border-bottom-style: inset;
border-left-style: outset;
}
</style>
</head>
<body>
<h1>Bartol plus - stil obruba</h1>
<section>
<article class="box-2020">
<h2>2020</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2021">
<h2>2021</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2022">
<h2>2022</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2023">
<h2>2023</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
</section>
</body>
</html>Css svojstvo border-width određuje širinu obruba za sve četiri stranice.
Numerička vrijednost svojstva može biti zadana u px, em, rem, vh and vw jedinicama ili korištenjem jedne od tri predefinirane vrijednosti: thin, medium, or thick.
thin: isto kao i 1px
medium: isto kao i 3px
thick: isto kao i 5px
Uporabom css svojstva border-width, uvijek mijenjate širinu obruba za sve četiri stranice elementa, neovisno koliko smo mu vrijednosti dodijelili!
Css svojstvu border-width možemo dodijeliti, od jedne do četiri vrijednosti, gdje svaka vrijednost označava širinu obruba jedne stranice html elementa. Redoslijed navođenja širine obruba je slijedeći: najprije vrijednost širine gornje, zatim desne, donje i na kraju lijeve stranice. Pogledajte sliku 1.
Kada css svojstvu border-width dodijelimo samo jednu vrijednost, navedena širina obruba će se primijeniti na sve četiri stranice.
Kada navedemo dvije vrijednosti, tada se dodijeljene vrijednosti širine obruba nasuprotnih stranica - gornje i desne - preslikavaju u nedodijeljene vrijednosti širine obruba: donje i lijeve stranice.
Kada navedemo tri vrijednosti, tada se dodijeljena vrijednost širine obruba nasuprotne stranice - desne - preslikava u nedodijeljenu vrijednosti širine obruba: lijeve stanice.
border-width: 5px;
/* kao: border-width: 5px 5px 5px 5px; */
/* skraćuje pojedinačno pisanje: */
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-width: 15px 8px;
/* kao: border-width: 15px 8px 15px 8px; */
border-width: 5px 8px 15px;
/* kao: border-width: 5px 8px 15px 8px; */
border-width: 15px 8px 25px 12px;
/* dodijeljene su širine za sve četiri stranice */
/* skraćuje pojedinačno pisanje: */
border-top-width: 15px;
border-right-width: 8px;
border-bottom-width: 25px;
border-left-width: 12px;
U prethodnim primjerima, mijenjali smo širinu obruba za sve četiri stranice html elementa. Ponekad želimo promijeniti širinu obruba, samo jedne stranice.
U slijedećem primjeru, svaki redak služi oblikovanju širine obruba jedne stranice html elementa. U našem stilskom pravilu, uporabit ćemo samo oblikovanja za stranice koje želimo promijeniti, ostala css svojstva iz primjera ne navodimo.
Tada možemo rabiti oblikovanje širine obruba za samo jednu stranicu:
p {
border-top-width: 5px; /* određuje širinu, samo gornjeg obruba */
border-right-width: 15px; /* određuje širinu, samo desnog obruba */
border-bottom-width: 20px; /* određuje širinu, samo donjeg obruba */
border-left-width: 25px; /* određuje širinu, samo lijevog obruba */
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS širina obruba (engl. border width)</title>
<style>
/* css dio koji oblikuje izgled stranice bez stila obruba */
* {
padding: 0; /* pomoću univerzalnog selektora dodjeljujemo */
margin: 0; /* vrijednosti svih odmaka i rubnica na nulu */
}
body {
font-size: 20px; /* veličina slova odlomka, ostali razmjerno veci */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section {
display: grid; /* najmanja širina stupca 500px */
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
}
article {
color: chocolate; /* boja teksta svih potomaka elemenata article */
margin: 10px; /* rubnica svakog elementa article */
padding: 10px; /* odmak svakog elementa article */
border-width: 3px; /* debljina obruba elemenata article */
}
h1, h2, p {
font-weight: 100; /* debljina slova h1, h2 i p */
margin: 10px; /* rubnica elemenata h1, h2 i p */
padding: 20px; /* odmak elemenata h1, h2 i p */
}
h2 {
width: 100px; /* širina naslova h2 */
text-align: center; /* vodoravno poravnje */
}
/* ovaj dio odnosi se na css svojstvo border */
article {
border-width: 2px 5px 2px 5px;
border-style: dotted;
}
.box h2, .box p {
border-style: solid;
}
.box-2020 h2 {
border-left-width: 20px;
}
.box-2021 h2 {
border-top-width: thin;
border-right-width: thick;
}
.box-2022 h2 {
border-right-width: 10px;
border-bottom-width: thin;
border-left-width: 5px;
}
.box-2023 h2 {
border-top-width: 5px;
border-right-width: thin;
border-bottom-width: 5px;
border-left-width: medium;
}
.box-2020 p {
border-width: 5px;
}
.box-2021 p {
border-width: 5px 2px;
}
.box-2022 p {
border-width: 2px 10px 2px;
}
.box-2023 p {
border-width: thick 5px thin 10px;
}
</style>
</head>
<body>
<h1>Bartol plus - širina obruba</h1>
<section>
<article class="box-2020">
<h2>2020</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2021">
<h2>2021</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2022">
<h2>2022</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2023">
<h2>2023</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
</section>
</body>
</html>Css svojstvo border-color koristimo za određivanje boje obruba za sve četiri stranice.
Vrijednost boje se dodijeljuje na isti način na koji dodjeljujemo vrijednost boje teksta (css svojstvo color) ili pozadine (css svojstvo background-color). Možemo koristiti dopuštene engleske nazive boje, heksadecimalnu, rbg ili hsl vrijednost.
Također možete koristiti i ključnu riječ transparent kada želite da boja bude prozirna.
border-color: blue;
border-color: #0000ff;
border-color: rgb(0, 0, 255);
border-color: hsl(240, 50%, 100%);
Želite li saznati više o načinima dodjeljivanja boja teksta i pozadine, možete pročitati članak o css bojama teksta i pozadine, a možete ga otvoriti pomoću donje poveznice:
nasljeđivanje svojstva border-colorKada vrijednost css svojstva border-color nije dodijeljena, ona se nasljeđuje od roditeljskog elementa.
Uporabom css svojstva border-color, uvijek mijenjate boju za sve četiri stranice elementa, neovisno koliko smo mu vrijednosti dodijelili!
Css svojstvu border-color možemo dodijeliti, od jedne do četiri vrijednosti, gdje svaka vrijednost označava boju jedne stranice html elementa. Redoslijed navođenja vrijednosti boja je slijedeći: najprije vrijednost boje gornje, zatim desne, donje i na kraju lijeve stranice obruba. Pogledajte sliku 1.
Kada css svojstvu border-color dodijelimo samo jednu vrijednost, navedena boja obruba će se primijeniti na sve četiri stranice.
Kada navedemo dvije vrijednosti, tada se dodijeljene vrijednosti boje obruba nasuprotnih stranica - gornje i desne - preslikavaju u nedodijeljene vrijednosti boje obruba: donje i lijeve stranice.
Kada navedemo tri vrijednosti, tada se dodijeljena vrijednost boje obruba nasuprotne stranice - desne - preslikava u nedodijeljenu vrijednosti boje obruba, lijeve stranice.
border-color: blue;
/* kao: border-color: blue blue blue blue; */
/* skraćuje pojedinačno pisanje: */
border-top-color: blue;
border-right-color: blue;
border-bottom-color: blue;
border-left-color: blue;
border-color: blue green;
/* kao: border-color: blue green blue green; */
border-color: red white blue; *
/* kao: border-width: red white blue white; */
border-color: red white blue blue;
/* dodijeljene su boje za sve četiri stranice */
/* skraćuje pojedinačno pisanje: */
border-top-color: red;
border-right-color: white;
border-bottom-color: blue;
border-left-color: blue;
U prethodnom primjeru, mijenjali smo boju obruba za sve četiri stranice html elementa. Ponekad želimo promijeniti boju, samo jedne stranice.
U slijedećem primjeru, svaki redak služi oblikovanju boje obruba jedne stranice html elementa. U našem stilskom pravilu, uporabit ćemo samo oblikovanja boje obruba za stranice koje želimo promijeniti, ostala css svojstva iz primjera ne navodimo.
p {
border-top-color: red; /* određuje boju, samo gornjeg obruba */
border-right-color: white; /* određuje boju, samo desnog obruba */
border-bottom-color: blue; /* određuje boju, samo donjeg obruba */
border-left-color: transparent; /* određuje boju, samo lijevog obruba */
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS boja obruba (engl. border color)</title>
<style>
/* css dio koji oblikuje izgled stranice bez stila obruba */
* {
padding: 0; /* pomoću univerzalnog selektora dodjeljujemo */
margin: 0; /* vrijednosti svih odmaka i rubnica na nulu */
}
body {
font-size: 20px; /* veličina slova odlomka, ostali razmjerno veci */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section {
display: grid; /* najmanja širina stupca 500px */
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
}
article {
color: chocolate; /* boja teksta svih potomaka elemenata article */
margin: 10px; /* rubnica svakog elementa article */
padding: 10px; /* odmak svakog elementa article */
border-width: 3px; /* debljina obruba elemenata article */
}
h1, h2, p {
font-weight: 100; /* debljina slova h1, h2 i p */
margin: 10px; /* rubnica elemenata h1, h2 i p */
padding: 20px; /* odmak elemenata h1, h2 i p */
}
h2 {
width: 100px; /* širina naslova h2 */
text-align: center; /* vodoravno poravnje */
}
/* ovaj dio odnosi se na css svojstvo border */
article {
border-width: 2px 5px 2px 5px;
border-style: dashed;
}
article h2, article p {
border-style: solid;
border-width: 8px;
}
.box-2020 h2 {
border-left-color: fuchsia;
}
.box-2021 h2 {
border-top-color: chartreuse;
border-right-color: darkgray;
}
.box-2022 h2 {
border-right-color: fuchsia;
border-bottom-color: saddlebrown;
border-left-color: fuchsia;
}
.box-2023 h2 {
border-top-color: yellow;
border-right-color: lawngreen;
border-bottom-color: fuchsia;
border-left-color: darkgray;
}
.box-2020 p {
border-color: fuchsia;
}
.box-2021 p {
border-color: gold fuchsia;
}
.box-2022 p {
border-color: fuchsia gold saddlebrown;
}
.box-2023 p {
border-color: yellow fuchsia gold saddlebrown;
}
</style>
</head>
<body>
<h1>Bartol plus - boja obruba</h1>
<section>
<article class="box-2020">
<h2>2020</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2021">
<h2>2021</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2022">
<h2>2022</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2023">
<h2>2023</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
</section>
</body>
</html>Css svojstvo border-radius koristimo za određivanje zaobljenja sva četiri kuta html elementa.
p {
border: 2px solid red;
border-radius: 5px;
}
Uporabom css svojstva border-radius, uvijek mijenjate zaobljenja sva četiri kuta elementa, neovisno koliko smo mu vrijednosti dodijelili!
Css svojstvu border-radius možemo dodijeliti, od jedne do četiri vrijednosti, gdje svaka vrijednost označava polumjer zaobljenja (engl. radius) jednog kuta html elementa.
Redoslijed navođenja zaobljenja kutova je slijedeći: najprije zaobljenje gornjeg-lijevog (engl. top-left) kuta, zatim gornjeg-desnog (engl. top-right), donjeg-desneg (engl. bottom-right) i na kraju donjeg-lijevog (engl. bottom-left) kuta. Pogledajte sliku 2.
Kada css svojstvu border-radius dodijelimo samo jednu vrijednost, navedeni polumjer zaobljenja će se primijeniti na sva četiri kuta.
Kada navedemo dvije vrijednosti, tada se dodijeljene vrijednosti polumjera zaobljenja nasuprotnih kutova - gornjeg-lijevog i gornjeg-desnog - preslikavaju u nedodijeljene vrijednosti polumjera zaobljenja: donjeg-desnog i donjeg-lijevog kuta.
Kada navedemo tri vrijednosti, tada se dodijeljena vrijednost polumjera zaobljenja nasuprotnog kuta - gornjeg-desnog - preslikava u nedodijeljenu vrijednosti polumjera zaobljenja, donjeg-lijevog kuta.
border-radius: 5px;
/* isto kao border-radius: 5px 5px 5px 5px; */
/* skraćuje pojedinačno pisanje: */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-radius: 12px 0;
/* isto kao border-radius: 12px 0 12px 0; */
border-radius: 12px 25% 5px;
/* isto kao border-radius: 12px 25% 5px 25%; */
border-radius: 12px 25% 15px 8px;
/* dodijeljeni su polumjeri zaobljenja sva četiri kuta */
/* skraćuje pojedinačno pisanje: */
border-top-left-radius: 12px;
border-top-right-radius: 25%;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 8px;
U prethodnim primjerima, mijenjali smo polumjere zaobljenja za sva četiri kuta html elementa. Ponekad želimo promijeniti polumjer zaobljenja za samo jedan kut.
U slijedećem primjeru, svaki redak služi oblikovanju polumjera zaobljenja jednog kuta html elementa. U našem stilskom pravilu, uporabit ćemo samo polumjer zaobljenja za kutove koje želimo promijeniti, ostala css svojstva iz primjera ne navodimo.
p {
border-top-left-radius: 25%; /* Polumjer zaobljenja, samo gornjeg lijevog kuta */
border-top-right-radius: 1rem; /* Polumjer zaobljenja, samo gornjeg desnog kuta */
border-bottom-right-radius: 25%; /* Polumjer zaobljenja, samo donjeg desnog kuta */
border-bottom-left-radius: 1rem; /* Polumjer zaobljenja, samo donjeg lijevog kuta */
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS zaobljeni rubovi</title>
<style>
* {
padding: 0; /* pomoću univerzalnog selektora dodjeljujemo */
margin: 0; /* vrijednosti svih odmaka i rubnica na nulu */
}
body {
font-size: 20px; /* veličina slova odlomka, ostali razmjerno veci */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
section {
display: grid; /* najmanja širina stupca 500px */
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
}
article {
color: chocolate; /* boja teksta svih potomaka elemenata article */
margin: 10px; /* rubnica svakog elementa article */
padding: 10px; /* odmak svakog elementa article */
border: 2px solid fuchsia;
}
h1, h2, p {
font-weight: 100; /* debljina slova h1, h2 i p */
margin: 10px; /* rubnica elemenata h1, h2 i p */
padding: 20px; /* odmak elemenata h1, h2 i p */
border: 2px solid chocolate;
}
h2 {
width: 80px; /* širina naslova h2 */
height: 80px; /* visina naslova h2 */
line-height: 80px; /* okomito poravnanje */
text-align: center; /* vodoravno poravnje */
color: white;
background-color: chocolate;
}
/* ovaj dio odnosi se na css svojstvo border-radius */
article {
border-radius: 8px;
}
.box-2020 h2 {
border-radius: 50%;
}
.box-2021 h2 {
border-top-right-radius: 50px;
border-top-left-radius: 10px;
}
.box-2022 h2 {
border-top-left-radius: 50px;
border-top-right-radius: 25px;
border-bottom-right-radius: 50px;
}
.box-2023 h2 {
border-top-left-radius: 50px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 50px;
}
.box-2020 p {
border-radius: 15px;
}
.box-2021 p {
border-radius: 20% 5px;
}
.box-2022 p {
border-radius: 5px 35px 35px;
}
.box-2023 p {
border-radius: 35px 35px 12px 12px ;
}
</style>
</head>
<body>
<h1>Bartol plus - zaobljeni rubovi</h1>
<section>
<article class="box-2020">
<h2>2020</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2021">
<h2>2021</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2022">
<h2>2022</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
<article class="box-2023">
<h2>2023</h2>
<p>Selektor klase izabire sve html elemente koji imaju zadanu vrijednosti svojstva class. Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku. Između točke i imena klase ne smije biti razmak.</p>
</article>
</section>
</body>
</html>Vrijednost svojstva border-radius može biti zadana i u postotcima. Ovo je osobito korisno kada želimo načiniti kružnicu ili elipsu, no može se koristiti i kada želimo vezati polumjer zaobljenja uz širinu html elementa.
p {
border-radius: 50%;
}
CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
