CSS border-radius attribute

Ορισμός και χρήση

Η ιδιότητα border-radius είναι μια συντομευμένη ιδιότητα που χρησιμοποιείται για να ρυθμίσει τις τέσσερις ιδιότητες border-*-radius.

Σημείωση:Η ιδιότητα αυτή επιτρέπει στο στοιχείο να προσθέσει γωνιακό περιθώριο.

Δείτε επίσης:

Εκμάθηση CSS3:Οι όροι περιθωρίου του CSS3

Παράδειγμα

Προσθέστε γωνιακή κλίμακα περιθωρίου στο στοιχείο div:

div
{
border:2px solid;
border-radius:25px;
}

Δοκιμάστε το προσωπικά

Υπάρχει περισσότερο παράδειγμα στο κάτω μέρος της σελίδας.

Γλώσσα γραφής CSS

border-radius: 1-4 length|% / 1-4 length|%;

Σημείωση:Ρυθμίζει τις τέσσερις τιμές για κάθε radii σε αυτή την σειρά. Αν παραλειφθεί το bottom-left, τότε είναι το ίδιο με το top-right. Αν παραλειφθεί το bottom-right, τότε είναι το ίδιο με το top-left. Αν παραλειφθεί το top-right, τότε είναι το ίδιο με το top-left.

Τιμή ιδιότητας

Τιμή Περιγραφή Έλεγχος
length Ορίζει τη μορφή της γωνιάς του κύκλου. Έλεγχος
% Ορίζει τη μορφή της γωνιάς του κύκλου ως ποσοστό. Έλεγχος

Παράδειγμα 1

border-radius:2em;

Εξίσου με:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Παράδειγμα 2

border-radius: 2em 1em 4em / 0.5em 3em;

Εξίσου με:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή: 0
Εκληροδότηση: no
Έκδοση: CSS3
Γλώσσα γραφής JavaScript: object.style.borderRadius="5px"

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμοί στην τаблицή δείχνουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5