Raja - CSS-temppuja

borderOminaisuus on lyhenne syntaksi CSS, joka hyväksyy useita arvoja viivan elementin ympäri sitä sovelletaan.

.box ( border: 3px solid red; height: 200px; width: 200px; )

Arvot

borderOmaisuuden hyväksyy yhden tai useamman seuraavista arvoista yhdistelmänä:

border: || || 

• border-width: Määrittää reunan paksuuden.
  • : Numeerinen arvo mitataan px, em, rem, vhja vwyksiköt.
  • thin: Vastaa 1px
  • medium: Vastaa 3px
  • thick: Vastaa 5px
• border-style: Määrittää elementin ympärille piirretyn viivan tyypin, mukaan lukien:
  • solid: Kiinteä, jatkuva viiva.
  • none (oletus): Viivaa ei piirretä.
  • hidden: Viiva on piirretty, mutta ei näkyvissä. tämä voi olla kätevää lisätäksesi elementtiin hieman ylimääräistä leveyttä näyttämättä reunaa.
  • dashed: Viiva.
  • dotted: Pisteistä koostuva viiva.
  • double: Kaksi viivaa piirretään elementin ympärille.
  • groove: Lisää viiste väriarvon perusteella tavalla, joka saa elementin näyttämään painettuna asiakirjaan.
  • ridge: Samanlainen kuin groove, mutta kääntää väriarvot tavalla, joka saa elementin näyttämään kohotetulta.
  • inset: Lisää jakoon sävyn, joka saa elementin näyttämään hieman masentuneelta.
  • outset: Samankaltainen kuin inset, mutta kääntää värit tavalla, joka saa elementin näyttämään hieman kohotetulta.
• color: Määrittää reunuksen värin ja hyväksyy ,, , , , , currentcolor and

Phew, that’s a lot of values for one little ol’ property! Here’s a demo that illustrates the differences between all of those style values:

See the Pen CSS border by Geoff Graham (@geoffgraham) on CodePen.

Browser Support

You can count on excellent support for the border property across all browsers.

Kromi	Safari	Firefox	Ooppera	IE	Android	iOS
Minkä tahansa	Minkä tahansa	Minkä tahansa	3,5+	4+	Minkä tahansa	Minkä tahansa

Related Properties

What we covered here is specific to the border property, but there are other properties that provide even more options for styling borders.

• border-collapse: Specifies the spacing between borders on the
• border-image: Allows the use of an image to draw the border instead of a solid color.
• border-radius: Provides control for rounded corners.

More Information

• CSS Backgrounds and Borders Module Level 3 Specification
• Understanding border-image
• A Tale of Border Gradients

---




element. #####