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:

Example: Basic Syntax

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:

Example: Setting Solid Red Border

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:

Example: Shorthand Syntax

border-inline: width style color;

Example with separate and shorthand properties:

Example: 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>.

Example: Applying border-inline to a <div> element

<div class="box">
  This is a box with inline borders.
.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.

Example: Combining border-inline with other CSS properties on a <p> element

<p class="highlight">
  This paragraph has inline borders and a background color.
.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:

Example: Applying border-inline to an image

<img src="image.jpg" alt="Sample Image" class="bordered-image">
.bordered-image {
  border-inline: 5px solid #333;

Example: Using border-inline on a span element

<p>This is <span class="highlight">highlighted</span> text.</p>
.highlight {
  border-inline: 2px solid green;
  padding: 2px 5px;

Example: Combining border-inline with other properties

<div class="box"> 
  This box has different borders on each side.
.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.

Border Style

CSS offers several border styles that you can apply to the border-inline property. Some common border styles include:

  • solid: Creates a solid line.
  • dashed: Creates a dashed line.
  • dotted: Creates a dotted line.
  • double: Creates a double line.
  • groove: Creates a 3D grooved effect.
  • ridge: Creates a 3D ridged effect.
  • inset: Creates a 3D inset effect.
  • outset: Creates a 3D outset effect.

To apply a specific border style, you can use the border-inline-style property or include the style keyword in the shorthand.

Example: Border Style CSS

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

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

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

You can also apply different styles to each side of the element using the properties for start and end styles.

Example: Mixed Styles CSS

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

In addition to predefined styles, you can create custom ones using CSS images or by combining multiple borders.

Border Color

You can specify the color of inline borders using either specific properties or by including color values in shorthand. CSS provides various ways to define colors:

  • Color keywords like red, blue, or green
  • Hexadecimal values like #ff0000 for red
  • RGB or RGBA functions for specifying colors with optional transparency
  • HSL or HSLA functions for specifying colors with optional transparency

Example: Border Color CSS

.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%);

You can also apply different colors to each side using start and end color properties.

Example: Two Color Border CSS

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

Combining these with background colors creates appealing designs. Experiment with combinations to achieve desired effects.

Border Width

The width of inline borders is specified using either specific properties or by including width values in shorthand. You can use various units:

Pixels (px): Specifies width in pixels Ems (em): Specifies width relative to font size Rems (rem): Specifies width relative to root font size Other CSS length units like pt, cm, mm, etc.

Example: Border Width CSS

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

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

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

Apply different widths on each side using start and end properties.

Example: Different Widths CSS

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

For responsive layouts, adjust widths based on screen size/device. Use media queries to change at breakpoints.

Example: Responsive Border CSS

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

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

Here, width reduces when screen is <= 600 pixels.

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).

Example: Element with border-inline affecting dimensions

Example: Element with border-inline affecting dimensions

<div class="box">Content goes here</div>
.box {
  width: 200px;
  padding: 10px;
  border-inline: 2px solid black;
  • .box has a content width of 200 pixels.
  • Padding is set to 10 pixels on all sides.
  • It has a border-inline of 2 pixels.

The total width will be:

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

To calculate total height:

Total Height = Content Height + Top Padding + Bottom Padding

Note that border-inline does not affect height.

If you want to set an overall dimension including borders and padding use:

Example: Using box-sizing: border-box

Example: Using box-sizing: border-box

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

With this setting:

  • .box will have a total width of exactly 200 pixels.
  • Content Width = 176 px (calculated as follows):
    Content Width = Total Width - Left Padding - Right Padding - Left Border - Right Border
                 =   (200 px)     -     (10 px)      -     (10 px)      -     (2 px )       -      (2 px )
                 =   **176** px  

Understanding how border-inline interacts with the box model helps in creating properly sized elements in your web pages. By considering all parts like size for contents, padding, and borders, you can control layout accurately.