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ą.