CSS zaoblené rohy

❮ Předchozí Další ❯

CSS zaoblené rohy

Pomocí vlastnosti CSS border-radiusmůžete libovolnému prvku přiřadit „zaoblené rohy“.

Vlastnost border-radius CSS

Vlastnost CSS border-radiusdefinuje poloměr rohů prvku.

Tip: Tato vlastnost umožňuje přidat k prvkům zaoblené rohy!

Zde jsou tři příklady:

1. Zaoblené rohy pro prvek se zadanou barvou pozadí:

Zaoblené rohy!

2. Zaoblené rohy pro prvek s ohraničením:

Zaoblené rohy!

3. Zaoblené rohy pro prvek s obrázkem na pozadí:

Zaoblené rohy!

Zde je kód:

Příklad

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Tip: Vlastnost border-radiusje ve skutečnosti zkrácenou vlastností pro vlastnosti border-top-left-radius, border-top-right-radiusa .border-bottom-right-radiusborder-bottom-left-radius

CSS border-radius – Určete každý roh

Vlastnost border-radiusmůže mít jednu až čtyři hodnoty. Zde jsou pravidla:

Čtyři hodnoty – border-radius: 15px 50px 30px 5px; (první hodnota platí pro levý horní roh, druhá hodnota platí pro pravý horní roh, třetí hodnota platí pro pravý dolní roh a čtvrtá hodnota platí pro levý dolní roh):

Tři hodnoty – border-radius: 15px 50px 30px; (první hodnota platí pro levý horní roh, druhá hodnota platí pro pravý horní a levý dolní roh a třetí hodnota platí pro pravý dolní roh):

Dvě hodnoty - border-radius: 15px 50px; (první hodnota platí pro levý horní a pravý dolní roh a druhá hodnota platí pro pravý horní a levý dolní roh):

Jedna hodnota - border-radius: 15px; (hodnota platí pro všechny čtyři rohy, které jsou zaobleny stejně:

Zde je kód:

Příklad

#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
height: 150px;
}

#rcorners4 {
  border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
  height: 150px;
}

Můžete také vytvořit eliptické rohy:

Příklad

#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
  width: 200px;
  height: 150px;
}

Vlastnosti zaoblených rohů CSS

Property	Description
border-radius	A shorthand property for setting all the four border---radius properties
border-top-left-radius	Defines the shape of the border of the top-left corner
border-top-right-radius	Defines the shape of the border of the top-right corner
border-bottom-right-radius	Defines the shape of the border of the bottom-right corner
border-bottom-left-radius	Defines the shape of the border of the bottom-left corner

❮ Předchozí Další ❯

CSS tutoriál

Pokročilé CSS

CSS responzivní

CSS mřížka

CSS SASS

Příklady CSS

CSS reference

CSS zaoblené rohy