Live
x
<html> <head> <title>Border</title> </head> <style> div { padding: 10px; margin: 10px; width: 300px; } .one { /* Szerokość obramowania */ border-width: 2px; /* Rodzaj linii stosowanej w obramowaniu Możliwe opcje: dotted dashed solid double groove ridge inset outset none hidden */ border-style: dashed; /* Kolor obramowania */ border-color: red; } .two { /* Wszystkie powyższe własności możemy zapisać w skrócie używając tylko własności "border" */ border: 2px dashed red; } .three { border: 3px dotted green; /* Zaokrąglenie narożników - podajemy promień okręgu. */ border-radius: 10px; } .four { /* Mamy również możliwość stylowanie każdego "borderu" oddzielnie. */ border-top-width: 2px; border-top-style: dashed; border-top-color: red; /* Możemy również użyć skrótów. */ border-left: 2px solid orange; border-right: 5px groove pink; border-bottom: 10px ridge gold; } .circle { /* border-radius = 50% na kwadratowym elemencie stworzy nam okrąg. */ border: 2px solid black; width: 20px; height: 20px; border-radius: 50%; text-align: center; } </style> <body> <section> <div class="one">Element 1</div> <div class="two">Element 2</div> <div class="three">Element 3</div> <div class="four">Element 4</div> <div class="circle">5</div> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.