CSS-kaarevat reunat

CSS-kaarevat reunat

border-radius Ominaisuus lisää elementtiin kulmien reunat:

Normaalit reunat

Kulmien reunat

Kulmien reunat

Kulmien reunat

Esimerkki

p {
  border: 2px solid red;
  border-radius: 5px;
}

Kokeile itse

Lisää esimerkkejä

Yhdessä lauseessa olevat kaikki yläreunan ominaisuudet
Tämä esimerkki näyttää lyhennetyt ominaisuudet, joita käytetään yhdessä lauseessa asettaaksesi yläreunan kaikki ominaisuudet.
Aseta alapuolen reunan tyylit
Tämä esimerkki näyttää, kuinka voit asettaa alapuolen reunan tyylin.
Aseta vasemmanreunan leveys
Tämä esimerkki näyttää, kuinka voit asettaa vasemmanreunan leveyden.
Aseta kaikkien neljän reunan väri
Tämä esimerkki näyttää, kuinka voit asettaa kaikkien neljän reunan värin. Se voi olla yksi tai neljä väriä.
Aseta oikeanreunan väri
Tämä esimerkki näyttää, kuinka voit asettaa oikeanreunan värin.

Kaikki CSS-reunuksen ominaisuudet

Ominaisuus Kuvaus
border Yhteenveto ominaisuus, joka asettaa kaikki reunan ominaisuudet yhdessä lauseessa.
border-color Yhteenveto ominaisuus, joka asettaa kaikkien neljän reunan värit.
border-radius Yhteenveto ominaisuus, joka voi asettaa kaikkien neljän reunan border-*-radius ominaisuudet.
border-style Yhteenveto ominaisuus, joka asettaa kaikkien neljän reunan tyylit.
border-width Yhteenveto ominaisuus, joka asettaa kaikkien neljän reunan leveyden.
border-bottom Yhteenveto ominaisuus, joka asettaa kaikki alareunan ominaisuudet yhdessä lauseessa.
border-bottom-color Aseta alareunan väri.
border-bottom-style Aseta alareunan tyyli.
border-bottom-width Aseta alareunan leveys.
border-left Yhteenveto ominaisuus, joka asettaa kaikki vasemmanreunan ominaisuudet yhdessä lauseessa.
border-left-color Aseta vasemmanreunan väri.
border-left-style Aseta vasemmanreunan tyyli.
border-left-width Aseta vasemmanreunan leveys.
border-right Yhteenveto ominaisuus, joka asettaa kaikki oikeanreunan ominaisuudet yhdessä lauseessa.
border-right-color Aseta oikeanreunan väri.
border-right-style Aseta oikeanreunan tyyli.
border-right-width Aseta oikeanreunan leveys.
border-top Yhteenveto ominaisuus, joka asettaa kaikki yläreunan ominaisuudet yhdessä lauseessa.
border-top-color Aseta yläreunan väri.
border-top-style Aseta yläreunan tyyli.
border-top-width Aseta yläreunan leveys.