CSS: Setting All Border Attributes At Once

This entry is part 24 of 26 in the series Basic CSS

Codecrawl.com-Border
A similar shortcut lets you specify border attributes for all four sides at once.

We can use the border attribute.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Border</title>
    <style>
        h3 {
            border: 2px green solid;
        }

        p {
            border-style: solid;
            border-top-color: blue;
            border-bottom-color: red;
            border-width: 2px;
        }
    </style>
</head>
<body>

<h3>Cape Town</h3>

<p>Ushuaia</p>

</body>
</html>
Posted in

CSS: Formatting border sides individually

This entry is part 23 of 26 in the series Basic CSS

Codecrawl.com-Border
By default, border attributes to all four sides.

We can specify a certain side of the border with special properties.

Here we apply 2 different colors to the top and bottom borders.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Border</title>
    <style>
        p {
            border-style: solid;
            border-top-color: blue;
            border-bottom-color: red;
            border-width: 2px;
        }
    </style>
</head>
<body>

<p>Ushuaia</p>

</body>
</html>

CSS: Specifying border width and color

This entry is part 22 of 26 in the series Basic CSS

Codecrawl.com-Border
By default a border is black and 4 pixels wide.

To change the color and width, we use the following highlighted line.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Border</title>
</head>
<body>

<p style='border: 5px solid purple; padding: 5px'>Ushuaia</p>

<p style='border: solid'>Default</p>

</body>
</html>

 

CSS: Applying border to a paragraph

This entry is part 21 of 26 in the series Basic CSS

Codecrawl.com-Border
You can apply border style rule to 2-sided tag.

Border style rules are commonly used in paragraphs, headings, lists, and also spans.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Border</title>
</head>
<body>

<p style='border: 1px solid'>Ushuaia</p>

<p style='border: 1px dotted'>Cape Town</p>

<p style='border: 1px dashed'>Pulau Perhentian</p>

<p style='border: 1px double'>Phuket</p>

<p style='border: 1px groove'>Ibiza</p>

<p style='border: 1px ridge'>Bali</p>

<p style='border: 1px inset'>Maldives</p>

<p style='border: 1px outset'>Morocco</p>

</body>
</html>