With the CSS border-radius property, you can give any element "rounded corners".
Το CSS Η ιδιότητα border-radius ορίζει την ακτίνα ενός γωνίες στοιχείου.
Συμβουλή: Αυτή η ιδιότητα σάς επιτρέπει να προσθέσετε στρογγυλεμένες γωνίες στοιχεία!
Ακολουθούν τρία παραδείγματα:
1. Στρογγυλεμένες γωνίες για ένα στοιχείο με καθορισμένο χρώμα φόντου:
Rounded corners!
2. Στρογγυλεμένες γωνίες για ένα στοιχείο με περίγραμμα:
Rounded corners!
3. Στρογγυλεμένες γωνίες για ένα στοιχείο με εικόνα φόντου:
Rounded corners!
Εδώ είναι ο κωδικός:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat:
repeat;
padding: 20px;
width:
200px;
height: 150px;
} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
Συμβουλή: Η ιδιότητα border-radius είναι στην πραγματικότητα μια συντομογραφία για το border-top-left-radius, border-top-right-radius, border-bottom-right-radius και ιδιότητες border-bottom-left-radius.
Η ιδιότητα border-radius μπορεί να έχει από ένα σε τέσσερις τιμές. Εδώ είναι οι κανόνες:
Τέσσερις τιμές - ακτίνα περιγράμματος: 15 εικονοστοιχεία 50 εικονοστοιχεία 30 εικονοστοιχεία 5 εικονοστοιχεία; (η πρώτη τιμή ισχύει για την επάνω αριστερή γωνία, η δεύτερη τιμή ισχύει για την επάνω δεξιά γωνία, η τρίτη τιμή ισχύει για την κάτω δεξιά γωνία και η τέταρτη τιμή ισχύει για την κάτω αριστερή γωνία):
Τρεις τιμές - ακτίνα περιγράμματος: 15 εικονοστοιχεία 50 εικονοστοιχεία 30 εικονοστοιχεία; (η πρώτη τιμή ισχύει για την επάνω αριστερή γωνία, η δεύτερη τιμή ισχύει για την επάνω δεξιά και την κάτω αριστερή γωνία και η τρίτη τιμή ισχύει για την κάτω δεξιά γωνία ):
Δύο τιμές - ακτίνα περιγράμματος: 15 εικονοστοιχεία 50 εικονοστοιχεία; (η πρώτη τιμή ισχύει για την επάνω αριστερή και την κάτω δεξιά γωνία και η δεύτερη τιμή ισχύει για την επάνω δεξιά και την κάτω αριστερή γωνία):
Μία τιμή - ακτίνα περιγράμματος: 15 εικονοστοιχεία; (η τιμή ισχύει και για τις τέσσερις γωνίες, οι οποίες είναι στρογγυλεμένες εξίσου:
Εδώ είναι ο κωδικός:
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Four values - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>
<p>Three values - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>
<p>Two values - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>
<p>One value - border-radius: 15px:</p>
<p id="rcorners4"></p>
</body>
</html>
Μπορείτε επίσης να δημιουργήσετε ελλειπτικές γωνίες:
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h1>The border-radius Property</h1>
<p>Elliptical border - border-radius: 50px / 15px:</p>
<p id="rcorners1"></p>
<p>Elliptical border - border-radius: 15px / 50px:</p>
<p id="rcorners2"></p>
<p>Ellipse border - border-radius: 50%:</p>
<p id="rcorners3"></p>
</body>
</html>
Μια συντομογραφία ιδιότητας για τον ορισμό και των τεσσάρων ιδιοτήτων περιγράμματος-*-*-ακτίνας
Καθορίζει το σχήμα του περιγράμματος της επάνω αριστερής γωνίας
Καθορίζει το σχήμα του περιγράμματος της επάνω δεξιάς γωνίας
Καθορίζει το σχήμα του περιγράμματος της κάτω δεξιάς γωνίας
Καθορίζει το σχήμα του περιγράμματος της κάτω αριστερής γωνίας