Visa källa för Border-radius

Egenskapen <code>border-radius</code> används för att sätta rundade hörn på ett element. Det här egenskapen kan ta mellan en och fyra grundvärden. Dessa grundvärden består av den vertikala radien, om inget annat anges får den horisontella radien samma värde. 

== Att ange horisontell radie ==
Om man anger ett värde, kommer det att gälla för alla hörnen.

Om man anger två värden; Det första gäller för [[border-*-*-radius|border-top-left-radius]] och [[border-*-*-radius|border-bottom-right-radius]]. Det andra värdet gäller för [[border-*-*-radius|border-top-right-radius]] och [[border-*-*-radius|border-bottom-left-radius]]. Det vill säga motsatta diagonala hörn.

Om man anger tre värden; Det första gäller för [[border-*-*-radius|border-top-left-radius]]. Det andra värdet gäller för [[border-*-*-radius|border-top-right-radius]] och [[border-*-*-radius|border-bottom-left-radius]]. Det tredje värdet gäller för [[border-*-*-radius|border-bottom-right-radius]].

Om man anger fyra värden; Det första gäller för [[border-*-*-radius|border-top-left-radius]]. Det andra värdet gäller för [[border-*-*-radius|border-top-right-radius]]. Det tredje värdet gäller för [[border-*-*-radius|border-bottom-right-radius]]. Det fjärde värdet gäller för [[border-*-*-radius|border-bottom-left-radius]]. Det vill säga värdena går ifrån övre, vänstra hörnet och fortsätter sedan hörn för hörn medsols.

== Att ange vertikal radie ==
Om man vill ange ett annat värde för den vertikala radien, anger man ett "<code>/</code>"-tecken efter värdena som angetts för den horisontella delen. Därefter anges värdena för den vertikala radien. Även här kan man ange mellan ett och fyra värden. Dessa fungerar precis som värdena för den horisontella radien.

== Egenskaper ==
{| class="wikitable"
| Parametrar
| <''längdvärden''> &#x7c; <code>initial</code> &#x7c; <code>inherit</code>
|-
| Defaultvärde
| <code>0</code>
|-
| Ärvs?
| Nej
|-
| Animerbart?
| Ja
|-
| Fungerar med...
| Alla element
|}

''Längdvärden'' anger den horisontella radien på avrundningen. Om detta är det enda längdvärdet, kommer det att sättas lika på bägge radierna. Se ovan för hur dessa fungerar

Om man även vill ange vertikal radie, avslutar man den horisontella delen med ett "<code>/</code>"-tecken och därefter anger man de vertikala radierna.

Längderna kan anges med hjälp av alla [[Måttenheter_i_CSS|CSS-måttenheter]].

== Exempel ==
<codepen pen="Xbvyeb" height="200" tab="css">
</codepen>

== Egenskapens definition ==
https://drafts.csswg.org/css-backgrounds-3/#border-radius