CodeGym /Java Course /Frontend SELF EN /Borders

Borders

Frontend SELF EN

Level 19 , Lesson 2

Available

8.1 Border Property

Borders are a big deal in web design. They help highlight elements and make the page look better. CSS gives us a bunch of properties for making and styling borders. Let's check out the main border properties, including shorthand and full syntax, as well as the properties for setting width, style, color, and rounded corners.

Main Parameters

You can set the main parameters of a border using individual properties: border-width, border-style, and border-color.

Syntax:

    
      element {
        border-width: width;
        border-style: style;
        border-color: color;
      }

Example Usage:

CSS

    
      .border-full {
        border-width: 2px;
        border-style: solid;
        border-color: red;
      }

Shorthand

The border property lets you set all the main border parameters (width, style, and color) in one go.

Syntax:

    
      element {
        border: width style color;
      }

CSS

    
      .border-compact {
        border: 2px solid red;
      }

      .border-full {
        border-width: 2px;
        border-style: solid;
        border-color: red;
      }

HTML

    
      <body>
        <div class="border-compact">Shorthand</div>
        <div class="border-full">Full Syntax</div>
      </body>

8.2 Border Width: border-width

The border-width property sets the border width. You can use pixels (px), points (pt), percentages (%), or keywords like thin, medium, or thick.

Syntax:

    
      element {
        border-width: width;
      }

Example:

CSS

    
      .border-thin {
        border: thin solid black;
      }

      .border-medium {
        border: medium solid black;
      }

      .border-thick {
        border: thick solid black;
      }

      .border-custom {
        border-width: 5px;
        border-style: solid;
        border-color: black;
      }

HTML

    
      <body>
        <div class="border-thin">Thin Border</div>
        <div class="border-medium">Medium Border</div>
        <div class="border-thick">Thick Border</div>
        <div class="border-custom">5px Border</div>
      </body>

8.3 Border Style: border-style

Description:

The border-style property sets the border style. The options include:

none: no border
solid: solid line
dotted: dotted line
dashed: dashed line
double: double line
groove: grooved border
ridge: ridged border
inset: inset border
outset: outset border

Syntax:

    
      element {
        border-style: style;
      }

Example:

CSS

    
      .border-none {
        border: 2px none black;
      }

      .border-solid {
        border: 2px solid black;
      }

      .border-dotted {
        border: 2px dotted black;
      }

      .border-dashed {
        border: 2px dashed black;
      }

      .border-double {
        border: 4px double black;
      }

      .border-groove {
        border: 4px groove black;
      }

      .border-ridge {
        border: 4px ridge black;
      }

      .border-inset {
        border: 4px inset black;
      }

      .border-outset {
        border: 4px outset black;
      }

HTML

    
      <body>
        <div class="border-none">No Border</div>
        <div class="border-solid">Solid Line</div>
        <div class="border-dotted">Dotted Line</div>
        <div class="border-dashed">Dashed Line</div>
        <div class="border-double">Double Line</div>
        <div class="border-groove">Groove</div>
        <div class="border-ridge">Ridge</div>
        <div class="border-inset">Inset Border</div>
        <div class="border-outset">Outset Border</div>
      </body>

8.4 Border Color: border-color

The border-color property sets the border color. You can specify colors using names, hex codes, RGB, RGBA, HSL, or HSLA formats.

Syntax:

    
      element {
        border-color: color;
      }

CSS

    
      .border-red {
        border: 2px solid red;
      }

      .border-blue {
        border: 2px solid blue;
      }

      .border-green {
        border: 2px solid green;
      }

      .border-rgba {
        border: 2px solid rgba(255, 0, 0, 0.5);
      }

HTML

    
      <body>
        <div class="border-red">Red Border</div>
        <div class="border-blue">Blue Border</div>
        <div class="border-green">Green Border</div>
        <div class="border-rgba">Semi-transparent Red Border</div>
      </body>

8.5 Rounded Corners with border-radius

The border-radius property lets you round the corners of elements to create rounded borders. You can apply it to all four corners at once or each corner separately.

Syntax:

    
      element {
        border-radius: radius;
      }

Values:

Single Value: like border-radius: 10px; — sets the same rounding radius for all corners
Two Values: like border-radius: 10px 20px; — the first value for the top-left and bottom-right corners, the second for the top-right and bottom-left corners
Four Values: like border-radius: 10px 20px 30px 40px; — sets radii for the top-left, top-right, bottom-right, and bottom-left corners respectively
Mixed Values: radii can be set in percentages, allowing rounding to adapt to element sizes

Example:

CSS

    
      .radius-all {
        border: 2px solid black;
        border-radius: 15px;
        padding: 10px;
        margin: 10px;
      }

      .radius-top {
        border: 2px solid red;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        padding: 10px;
        margin: 10px;
      }

      .radius-bottom {
        border: 2px solid blue;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        padding: 10px;
        margin: 10px;
      }

      .radius-mixed {
        border: 2px solid green;
        border-radius: 10px 20px 30px 40px;
        padding: 10px;
        margin: 10px;
      }

HTML

    
      <body>
        <div class="radius-all">Round All Corners</div>
        <div class="radius-top">Round Top Corners</div>
        <div class="radius-bottom">Round Bottom Corners</div>
        <div class="radius-mixed">Mixed Round Corners</div>
      </body>