Types of CSS borders

Home › Forums › Web Design › CSS › Types of CSS borders

  • This topic is empty.
  • Creator
    Topic
  • July 19, 2024 at 3:01 pm #6455
    designboyo
    Keymaster
      Up
      0
      Down
      ::

      CSS borders can be customized in various ways to enhance the appearance of HTML elements. Here are the main types of CSS borders and how to use them:

      1. Basic Borders

      1.1 Solid Border A solid border is a continuous line with no gaps.

      Example:

      css
      /* Solid border */
      div {
      border: 2px solid black;
      }

      1.2 Dashed Border A dashed border consists of a series of short lines and gaps.

      Example:

      css
      /* Dashed border */
      div {
      border: 2px dashed black;
      }

      1.3 Dotted Border A dotted border consists of a series of dots.

      Example:

      css
      /* Dotted border */
      div {
      border: 2px dotted black;
      }

      1.4 Double Border A double border has two solid lines with a gap between them.

      Example:

      css
      /* Double border */
      div {
      border: 4px double black;
      }

      1.5 Groove Border A groove border appears as though it is carved into the page.

      Example:

      css
      /* Groove border */
      div {
      border: 4px groove black;
      }

      1.6 Ridge Border A ridge border appears as though it is raised from the page.

      Example:

      css
      /* Ridge border */
      div {
      border: 4px ridge black;
      }

      1.7 Inset Border An inset border appears as though it is pushed into the page.

      Example:

      css
      /* Inset border */
      div {
      border: 4px inset black;
      }

      1.8 Outset Border An outset border appears as though it is coming out of the page.

      Example:

      css
      /* Outset border */
      div {
      border: 4px outset black;
      }

      1.9 None Border A border of none means the element has no border.

      Example:

      css
      /* No border */
      div {
      border: none;
      }

      2. Border Radius

      2.1 Single Radius The border-radius property rounds the corners of the border box. You can set a single radius for all corners.

      Example:

      css
      /* Single radius */
      div {
      border: 2px solid black;
      border-radius: 10px;
      }

      2.2 Multi-radius You can set different radii for each corner using four values.

      Example:

      css
      /* Multi-radius */
      div {
      border: 2px solid black;
      border-radius: 10px 20px 30px 40px;
      }

      2.3 Elliptical Radius You can specify elliptical radii for more complex shapes.

      Example:

      css
      /* Elliptical radius */
      div {
      border: 2px solid black;
      border-radius: 50% 25%;
      }

      3. Border Styles

      3.1 Border Width You can set the width of the border using the border-width property.

      Example:

      css
      /* Border width */
      div {
      border: 3px solid black;
      }

      3.2 Border Color You can set the color of the border using the border-color property.

      Example:

      css
      /* Border color */
      div {
      border: 3px solid black;
      border-color: red;
      }

      3.3 Individual Borders You can set borders individually for each side of an element.

      Example:

      css
      /* Individual borders */
      div {
      border-top: 2px solid black;
      border-right: 4px dashed red;
      border-bottom: 6px dotted green;
      border-left: 8px double blue;
      }

      4. Advanced Border Techniques

      4.1 Border Image You can use an image as the border of an element with the border-image property.

      Example:

      css
      /* Border image */
      div {
      border: 10px solid transparent;
      /* Border width */
      border-image: url('border-image.png') 30 round;
      }

      4.2 Border Collapse When dealing with tables, you can use the border-collapse property to control whether table borders are collapsed into a single border or separated.

      Example:

      css
      /* Border collapse */
      table {
      border-collapse: collapse;
      }

      th, td {
      border: 1px solid black;
      }

      Complete Example

      Here is a complete example demonstrating different border styles:

      HTML:

      html
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>CSS Borders Example</title>
      <link rel="stylesheet" href="styles.css">
      </head>
      <body>
      <div class="border-example">Solid Border</div>
      <div class="border-example dashed">Dashed Border</div>
      <div class="border-example dotted">Dotted Border</div>
      <div class="border-example double">Double Border</div>
      <div class="border-example rounded">Rounded Corners</div>
      </body>
      </html>

      CSS (styles.css):

      css
      /* General border styling */
      .border-example {
      padding: 20px;
      margin: 10px;
      width: 200px;
      }
      /* Solid border */
      .border-example {
      border: 2px solid black;
      }
      /* Dashed border */
      .dashed {
      border: 2px dashed black;
      }
      /* Dotted border */
      .dotted {
      border: 2px dotted black;
      }
      /* Double border */
      .double {
      border: 4px double black;
      }
      /* Rounded corners */
      .rounded {
      border: 2px solid black;
      border-radius: 15px;
      }

      In this example, each div has a different border style to showcase the variety of options available in CSS.

    • Creator
      Topic
    Share
    • You must be logged in to reply to this topic.
    Share