CSS - Border Inline

CSS Border Inline Basics

The border-inline property in CSS sets the inline borders of an element. It allows you to define the style, width, and color of the borders on the left and right sides of an element in a single declaration.

The basic syntax for the border-inline property is:

border-inline: width style color;

Here, width specifies the thickness of the border, style determines how it looks (such as solid, dashed, or dotted), and color sets its color.

To set a solid red border with a width of 2 pixels on the left and right sides of an element:

border-inline: 2px solid red;

The border-inline property accepts different values for each component:

• width: You can use units such as pixels (px), ems (em), rems (rem), or other valid CSS length units.
• style: The border style can be set using keywords like solid, dashed, or others.
• color: The border color can be specified using color keywords (e.g., red, blue), hexadecimal values (#ff0000), RGB/RGBA values (rgb(255, 0, 0)), or HSL/HSLA values (hsl(0, 100%, 50%)).

CSS also provides a shorthand property for setting all three components (width, style, and color) in one declaration. The shorthand syntax is:

border-inline: width style color;

Example with separate and shorthand properties:

/* Individual properties */
border-inline-width: 2px;
border-inline-style: solid;
border-inline-color: blue;

/* Shorthand property */
border-inline: 2px solid blue;

Using this shorthand helps you write more concise CSS code.

Applying Border Inline

The border-inline property can be used on various HTML elements to add borders on their left and right sides. You can use it on elements such as <div>, <p>, <span>, and <img>.

<div class="box">
  This is a box with inline borders.
</div>

.box {
  border-inline: 2px solid blue;
  padding: 10px;
}

In this example, the <div> element with the class "box" will have a solid blue border with a width of 2 pixels on its left and right sides. The padding property adds some space between the content and the borders.

You can also combine border-inline with other CSS properties to create interesting designs. For instance, you can set a background color, adjust the padding, or add margins to the element.

<p class="highlight">
  This paragraph has inline borders and a background color.
</p>

.highlight {
  border-inline: 3px dashed red;
  background-color: #f0f0f0;
  padding: 15px;
  margin-bottom: 20px;
}

In this example, the <p> element with the class "highlight" has a dashed red border on its left and right sides, a light gray background color, padding of 15 pixels, and a bottom margin of 20 pixels.

Here are more examples of using border-inline:

<img src="image.jpg" alt="Sample Image" class="bordered-image">

.bordered-image {
  border-inline: 5px solid #333;
}

<p>This is <span class="highlight">highlighted</span> text.</p>

.highlight {
  border-inline: 2px solid green;
  padding: 2px 5px;
}

<div class="box"> 
  This box has different borders on each side.
</div>

.box {
  border: 1px solid black;
  border-inline: 4px dotted blue;
  padding: 10px;
}

By creatively combining it with other CSS properties, you can create interesting designs for your webpages.

Customizing Border Inline

When using the border-inline property, you can customize aspects of the border, such as its style, color, and width.

.solid-border {
  border-inline-style: solid;
}

.dashed-border {
  border-inline-style: dashed;
}

.dotted-border {
  border-inline: 2px dotted blue;
}

.mixed-styles {
  border-inline-start-style: solid;
  border-inline-end-style: dashed;
}

.red-border {
  border-inline-color: red;
}

.hex-border {
  border-inline: 2px solid #00ff00;
}

.rgb-border {
  border-inline-color: rgb(0, 0, 255);
}

.hsl-border {
  border-inline: 3px dashed hsl(120, 100%, 50%);
}

.two-color-border {
  border-start-color: blue; 
  border-end-color: green;
}

.thin-border { 
  border-width: 1px; 
}

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

.em-border { 
  border-width: 0.5em; 
}

.different-widths {  
  border-start-width: 2px;
  border-end-width: 4px;
}

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

@media screen and (max-width: 600px) {
  .responsive-border {
    border-width: 1px;
  }
}

Border Inline and Box Model

To understand how the border-inline property affects an element's dimensions, you need a basic understanding of the CSS box model.

In CSS, every element is treated as a rectangular box with content, padding, borders, and margins. The box model defines how these parts interact and contribute to the element's total size.

The content area is where the actual content (text, images) of the element is displayed. Surrounding the content area is the padding, which adds space between the content and the borders. The border-inline property sets borders on the left and right sides of an element outside its padding. Margins are on the outermost layer, creating space between elements.

When you set border-inline, it affects an element's dimensions. By default, border width adds to an element's total width. For example, if you have an element with a width of 200 pixels and a border-inline of 2 pixels each side, its total width will be 204 pixels (200px content width + 2px left border + 2px right border).

<div class="box">Content goes here</div>

.box {
  width: 200px;
  padding: 10px;
  border-inline: 2px solid black;
}

224 pixels = 
(200px content) + 
(10px left padding) + 
(10px right padding) +
(2px left border) +
(2px right border)

Total Height = Content Height + Top Padding + Bottom Padding

.box {
    width: 200px;
    padding: 10px;
    border-inline: 2px solid black;
    box-sizing: border-box;
}