Η ιδιότητα class="w3-codespan">border-radius χρησιμοποιείται για την προσθήκη στρογγυλεμένων περιγραμμάτων σε ένα στοιχείο:
Normal border
Round border
Rounder border
Roundest border
p {
border: 2px solid red;
border-radius: 5px;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
padding: 5px;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
Όλες οι κορυφαίες ιδιότητες περιγράμματος σε μία δήλωση
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-top: thick double #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
Αυτό το παράδειγμα δείχνει μια ιδιότητα συντομογραφίας για τον ορισμό όλων των ιδιοτήτων για το επάνω περίγραμμα σε μία δήλωση.
Ορίστε το στυλ του κάτω περιγράμματος
<!DOCTYPE html>
<html>
<head>
<style>
p {border-style: solid;}
p.none {border-bottom-style: none;}
p.dotted {border-bottom-style: dotted;}
p.dashed {border-bottom-style: dashed;}
p.solid {border-bottom-style: solid;}
p.double {border-bottom-style: double;}
p.groove {border-bottom-style: groove;}
p.ridge {border-bottom-style: ridge;}
p.inset {border-bottom-style: inset;}
p.outset {border-bottom-style: outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε το στυλ του κάτω περιγράμματος.
Ορίστε το πλάτος του αριστερού περιγράμματος
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-left-width: 15px;
}
</style>
</head>
<body>
<p><b>Note:</b> The "border-left-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε το πλάτος του αριστερού περιγράμματος.
Ορίστε το χρώμα των τεσσάρων περιγραμμάτων
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε το χρώμα των τεσσάρων περιγραμμάτων. Μπορεί να έχει από ένα έως τέσσερα χρώματα.
Ορίστε το χρώμα του δεξιού περιγράμματος
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-right-color: #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>
Αυτό το παράδειγμα δείχνει πώς να ορίσετε το χρώμα του δεξιού περιγράμματος.
Ορίζει όλες τις ιδιότητες περιγράμματος σε μία δήλωση
Ορίζει όλες τις ιδιότητες του κάτω περιγράμματος σε μία δήλωση
Ορίζει το χρώμα του κάτω περιγράμματος
Ορίζει το στυλ του κάτω περιγράμματος
Ορίζει το πλάτος του κάτω περιγράμματος
Ορίζει το χρώμα των τεσσάρων περιγραμμάτων
Ορίζει όλες τις ιδιότητες του αριστερού περιγράμματος σε μία δήλωση
Ορίζει το χρώμα του αριστερού περιγράμματος
Ορίζει το στυλ του αριστερού περιγράμματος
Ορίζει το πλάτος του αριστερού περιγράμματος
Ορίζει και τις τέσσερις ιδιότητες περιγράμματος-*-ακτίνας για στρογγυλεμένες γωνίες
Ορίζει όλες τις σωστές ιδιότητες περιγράμματος σε μία δήλωση
Ορίζει το χρώμα του δεξιού περιγράμματος
Ορίζει το στυλ του δεξιού περιγράμματος
Ορίζει το πλάτος του δεξιού περιγράμματος
Ορίζει το στυλ των τεσσάρων περιγραμμάτων
Ορίζει όλες τις ιδιότητες του επάνω περιγράμματος σε μία δήλωση
Ορίζει το χρώμα του επάνω περιγράμματος
Ορίζει το στυλ του επάνω περιγράμματος
Ορίζει το πλάτος του επάνω περιγράμματος
Ορίζει το πλάτος των τεσσάρων περιγραμμάτων