Základy práce s okraji v CSS

Nyní se naučíme přidávat okraj prvkům. To se dělá pomocí tří vlastností: vlastnost border-width nastavuje tloušťku okraje, border-color - barvu, a border-style nastavuje typ okraje.

První dvě vlastnosti fungují zjevným způsobem: border-color přijímá barvy ve stejném formátu jako vlastnost color, a tloušťka okraje se nastavuje v pixelech. Vlastnost border-style přijímá hodnoty ve formě klíčových slov. Například, hodnota solid nastavuje plnou čáru.

Vytvořme například okraj o tloušťce 3 pixely, ve formě plné čáry, červené barvy:

html<div id="elem"></div>

css#elem {
  border-width: 3px;    /* tloušťka 3px */
  border-style: solid;  /* ve formě čáry */
  border-color: red;    /* červená barva */
  width: 300px;
  height: 100px;
}

Результат:

V následujících lekcích se podíváme na práci s okraji podrobněji.