Rámování elementů (border)

Okraje slouží k vizuálnímu oddělení elementů a mohou významně ovlivnit vzhled vašeho designu. Každý element v HTML má implicitně "box model", jehož součástí je i okraj.

Základní vlastnosti pro nastavení okraje jsou:

• border-width

  Definuje tloušťku okraje. Můžete použít hodnoty jako px, em, thin, medium, thick.

  div {
      border-width: 2px;
  }

• border-style

  Určuje styl čáry okraje. Nejpoužívanější hodnoty jsou:

  • solid: Plná čára
  • dashed: Čárkovaná čára
  • dotted: Tečkovaná čára
  • double: Dvojitá čára
  • groove, ridge, inset, outset: 3D efekty, závislé na barvě
  • none: Žádný okraj (výchozí)

  div {
      border-style: solid;
  }

• border-color

  Nastavuje barvu okraje. Můžete použít názvy barev (red), hexadecimální kódy (#FF0000), RGB (rgb(255,0,0)) nebo RGBA (rgba(255,0,0,0.5) pro průhlednost).

  div {
      border-color: blue;
  }

Zkrácený zápis pro okraje (Shorthand)

Místo definování každé vlastnosti zvlášť můžete použít zkrácený zápis border, který kombinuje šířku, styl a barvu v jednom řádku. Pořadí je typicky šířka styl barva.

div {
    border: 2px solid #3498db; /* 2px široký, plný, modrý okraj */
}

Specifické strany okraje

Můžete stylovat jednotlivé strany elementu (horní, pravá, dolní, levá) pomocí specifických vlastností, jako jsou border-top-width, border-right-style, border-bottom-color atd. Existují i zkrácené zápisy pro jednotlivé strany, např. border-top: 1px dashed black;.

.box {
    border-top: 5px solid red;
    border-right: 3px dotted green;
    border-bottom: 5px solid blue;
    border-left: 3px dotted orange;
}

Zaoblené rohy: border-radius

Vlastnost border-radius umožňuje zaoblit rohy elementu. Můžete použít jednu hodnotu pro všechny rohy, nebo specifikovat hodnoty pro každý roh zvlášť (horní levý, horní pravý, dolní pravý, dolní levý).

.kulaty-box {
    border: 2px solid black;
    border-radius: 10px; /* Zaoblí všechny rohy o 10px */
}
.ovalny-box {
    border: 2px solid black;
    border-radius: 50%; /* Vytvoří kruh nebo ovál (pokud není stejná šířka/výška) */
}
.custom-rohy {
    border: 2px solid black;
    border-radius: 10px 20px 30px 40px; /* Každý roh jinak */
}

Vnitřní odsazení: padding

I když padding není přímo součástí okraje, úzce s ním souvisí v rámci box modelu. Padding je prostor mezi obsahem elementu a jeho okrajem. Vytváří tak "výplň" uvnitř elementu.

.tlacitko {
    padding: 10px 20px; /* 10px nahoře/dole, 20px vlevo/vpravo */
    border: 1px solid gray;
}