Generator Ramek HTML i CSS

Kod CSS:

border: 5px solid #000000;

Szerokość ramki (px):
Styl ramki:
Kolor ramki:

Zaokrąglenie ramki (px):

Inne zaokrąlenie:
Lewy górny róg:
Prawy górny róg:
Prawy dolny róg:
Lewy dolny róg:

Jak używać generatora ramek?

Krótki poradnik dla osób początkujących w HTML i CSS

Po zdefiniowaniu wszystkich właściwości w odpowiednich polach i uzyskaniu satysfakcjonującego efektu można wdrożyć wygenerowaną ramkę do swojego projektu. Można to zrobić poprzez nadanie konkretnemu elementowi (np. div) klasy i przypisanie właściwości CSS, lub poprzez utworzenie elementu z atrybutem "style" (mniej polecana metoda).

Przykład:

Generator wygenerował kod:
border: 10px double #15b259;
border-radius: 0px;
Dodajemy go do naszego arkusza stylów (np. pliku "style.css") lub do pliku HTML między znacznikami
<style></style>
jako klasę lub ID. Klasa musi zaczynać się od znaku ".", a ID od "#". Możemy nadać jej dowolną nazwę:
Fragment przykładowego pliku style.css:
.myBorder {
    border: 10px double #15b259;
    border-radius: 0px;
}

Teraz chcąc uzyskać efekt w naszym pliku HTML musimy odwołać się w elemencie do utworzonej przez nas klasy CSS.

Fragment przykładowego pliku index.html:

Przed:
<div>Testowy napis</div>
Po:
<div class="myBorder">Testowy napis</div>
Uwaga! Żeby taki kod umieszczony w pliku .css zadziałał, musimy przed wykonaniem tego kodu (najlepiej w sekcji
<head></head>
) umieścić odwołanie do tego pliku, np:
<link rel="stylesheet" href="style.css">

Podsumowanie:

Przykładowy plik HTML (index.html):
<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="style.css" rel="stylesheet">
</head>

<body>
    <div class="myBorder">Testowy napis</div>
</body>

</html>
Przykładowy plik CSS (style.css):
.myBorder {
    border: 10px double #15b259;
    border-radius: 0px;
}
Uwaga! W tym przypadku oba pliki muszą znajdować się w tym samym folderze. Alternatywnie można zmienić ścieżkę pliku style.css na własną.