CSS Properties

Border

The CSS property border can be used to add border to an element. We can specify a common border for the entire element on all sides, but we also have the option of specifying borders invividually for each side of the default rectangular HTML elements.

Common attributes

Code example: shorthand

Copy
.all-style {
    border: solid;
}

.all-style-color {
    border: dotted red;
}

.all-width-style {
    border: 1em solid;
}

.all-width-style-color {
    border: 1em double #d32f2f;
}

which produces

.all-style

.all-style-color

.all-width-style

.all-width-style-color

Code example: extended

Copy
.rainbow {
    /*              top    right  bottom left */
    border-width: 0.2em 0.4em 0.6em 0.8em;
    border-color: red orange yellow green;
    border-style: solid dashed double dotted;
}

which produces

.rainbow

By using the extended properties we can specify borders for each side in more detail.

Code example: border radius

We can round out our sharp corners with a CSS property called border-radius.

Copy
.rounded {
    border: 0.5em solid black;

    /* all equivalent */

    /* all sides */
    border-radius: 1em;
    /* top/bottom right/left */
    border-radius: 1em 1em;
    /* top right bottom left */
    border-radius: 1em 1em 1em 1em;
}

which produces

.rounded

Copy
black-border

<div class="quote">
  <p>
    "Ah! Mother, mother! How can it be that I must part from you? Who else is there that has any claim on me <strong>but you</strong>? Here I sit and there you are lying, and we have much to say, that we could never say it."
  </p>
  <footer>
    -- Paul Bäumer, <em>All Quiet on the Western Front</em>
  </footer>
</div>

.black-border {
  border: 0.5em solid black;
}

.quote {
  color: #093371;
  background-color: #a5d6a7;
}

.quote strong {
  color: #b71c1c;
}