Egenskapen border-radius

Egenskapen border-radius skapar rundade hörn för kantlinjen och bakgrunden. Värdet på egenskapen är vilka enheter för storlekar som helst. Standardvärde: 0. Är en förkortning för egenskaperna border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Syntax

cssselektor {
  border-radius: värde;
}

Antal värden

Egenskapen kan ta 1, 2, 3 eller 4 värden, angivna mellan mellanslag:

Elliptisk rundning

Två värden med snedstreck sätter elliptisk rundning. Värdet före snedstrecket anger horisontell rundning, och värdena efter snedstrecket - vertikal:

cssselektor {
  border-style: horisontell / vertikal;
}

Om rundningar anges för flera hörn, så listas alla horisontella rundningar före snedstrecket, och alla vertikala efter det.

Exempel

Låt oss sätta rundningen 10px för alla hörn:

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

css#elem {
  border-radius: 10px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exempel

Låt oss se hur rundningar ser ut för kantlinjen i form av punkter:

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

css#elem {
  border-radius: 10px;
  border: 1px dotted black;
  width: 300px;
  height: 100px;
}

Результат:

Exempel

Låt oss sätta rundningen till 10px för hörn i en diagonal, och rundningar till 40px - för hörn i den andra diagonalen:

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

css#elem {
  border-radius: 10px 40px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exempel

Låt oss sätta rundningen till 10px för övre vänstra hörnet, rundningen till 30px för nedre högra hörnet, och rundningar till 50px - för hörn i den andra diagonalen:

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

css#elem {
  border-radius: 10px 50px 30px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exempel

Låt oss sätta olika rundningar för varje av hörnen:

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

css#elem {
  border-radius: 10px 30px 50px 70px;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Exempel

Låt oss göra en elliptisk rundning, genom att sätta 20px för den horisontella delen av rundningen, och 40px - för den vertikala:

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

css#elem {
  border: 1px solid black;
  border-radius: 20px / 40px;
  width: 300px;
  height: 100px;
}

Результат:

Exempel

Och nu sätter vi olika elliptiska rundningar för alla hörn var för sig:

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

css#elem {
  border: 1px solid black;
  border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
  width: 300px;
  height: 100px;
}

Результат:

Exempel

Om man för ett kvadratiskt block sätter rundningar, lika med hälften av kvadratens sida, så blir det en cirkel:

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

css#elem {
  border-radius: 100px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Exempel

Om man sätter en rundning som är större än sidan på kvadraten, så blir det ändå en cirkel:

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

css#elem {
  border-radius: 200px;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}

Результат:

Exempel

En cirkel kan också fås om man sätter border-radius till 50% (fördelen är att man inte behöver ändra rundningen när kvadratens storlek ändras):

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

css#elem {
  border: 1px solid black;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

Результат:

Exempel

Om man sätter border-radius i procent för en rektangel, så blir det en elliptisk rundning. Om bredden är satt till 400px, höjden till 200px, och border-radius till 10%, så är det samma sak som om det stått 40px/20px:

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

css#elem {
  border-radius: 10%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Exempel

Låt oss sätta värdet border-radius till 50% för en rektangel - det blir en ellips:

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

css#elem {
  border-radius: 50%;
  border: 1px solid black;
  width: 400px;
  height: 200px;
}

Результат:

Exempel

Egenskapen border-radius rundar inte bara hörnen på kantlinjen, utan även bakgrunden:

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

css#elem {
  border-radius: 20px;
  width: 300px;
  height: 100px;
  background-color: #e4f1ed;
}

Результат:

Se även