Syftet med denna manual är att förklara hur man skapar runda hörnkanter. För detta måste vi först veta om ' gräns ' fast egendom. Så, låt oss börja!
Vad är 'gränsegendom' i CSS?
För att skapa en ram runt ett element måste du använda ' gräns ' fast egendom. Genom att använda den här egenskapen kan du ställa in ' stil ”, “ Färg ', och ' bredd ” av gränsen.
Syntax
Syntaxen för gränsegenskapen ges som:
gräns : bredd stil färg
Här är beskrivningen av de ovan angivna värdena:
- bredd: Den används för att ställa in bredden på kanten.
- stil: Den används för att ställa in ramstilen, till exempel prickad, streckad, heldragen eller dubbel.
- Färg: Det bestämmer gränsens färg.
Här är ett exempel där vi implementerar ' gräns ' fast egendom.
Hur skapar man gräns med CSS?
För att skapa en kant, lägg först till ett element i en HTML-fil. För att göra det kommer vi att skapa en
och
:
< kropp >
< div klass = 'hörn' >
< h1 > Linux-tips < / h1 >
< sid > Runda hörn i CSS < / sid >
< / div >
< / kropp >
Därefter kommer vi att gå till CSS-sektionen.
Här, ' .hörn ” används för att komma åt klassen som är tilldelad
.hörn {
gräns : 4px fast rgb ( 248 , 6 , 107 ) ;
bredd : 250 pixlar ;
höjd : 150 pixlar ;
bakgrundsfärg : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
När du har implementerat ovan nämnda kod, gå till HTML-filen och kör den. Du kommer att se följande resultat:
Nu går vi till nästa del, där vi skapar den fyrkantiga gränsen till den runda hörnkanten.
Hur rundar man hörnet med CSS?
För att skapa en rund hörnkant, ' gräns-radie ” egenskapen används, där du kan ställa in radien på hörnet enligt dina preferenser.
Syntax
Syntaxen för egenskapen border-radius ges nedan:
gräns-radie : värdeLåt oss fortsätta med föregående exempel och ställa in gränsradien för att uppnå runda hörn.
Exempel
I ' .hörn ' klass för CSS-filen, ställ in värdet på ' gräns-radie ' egendom som ' 30 pixlar ”:
gräns-radie : 30 pixlar ;Med ovanstående rad tillagd får du följande utdata:
Ovan givna utdata betyder att gränser framgångsrikt har ändrats till runda hörn på grund av egenskapen gränsradie.
Slutsats
I CSS ' gräns-radie ” Egenskapen används för att ändra hörnet på gränserna. Formen på kurvan ändras enligt det givna värdet på radien. Med hjälp av den nämnda egenskapen kan du ställa in hörnets radie enligt ditt val. I den här artikeln har vi förklarat hur man rundar hörngränser med hjälp av egenskapen border-radius med hjälp av ett exempel.