CSS – Border Inline


CSS – border-inline



”;


The CSS property border-inline is a shorthand property that sets the values for different logical inline border attributes, combining them into a single statement.

Possible values

The border-inline is specified with one or more of the following, in any order:

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax


border-inline = <''border-block-start''>  

Applies to

All the HTML elements.

CSS border-inline – Basic Example

The following example demonstrates the usage of border-inline CSS property.


<html>
<head>
<style>
   .container {
      background-color: #ffeeba;
      width: 450px;
      height: 450px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px; 
      border-radius: 10px;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
   }
   .custom-border {
      border-inline: 6px dashed #3498db;
      padding: 10px;
      font-weight: bold;
      color: #333;
   }
</style>
</head>
<body>
<div class="container">
<p class="custom-border">A Example with border-inline property</p>
</div>
</body>
</html>

CSS border-inline – Writing Mode

The following example demonstrates the usage of border-inline CSS property with vertical writing mode.

   
<html>
<head>
<style>
   .container {
      background-color: #fed8b1;
      width: 400px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      border-radius: 15px;
      box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6);
      writing-mode: vertical-rl;
   }
   .demo-border {
      border:4px solid black;
      border-inline: 0.9rem groove #e74c3c;
      padding: 10px;
      font-weight: bold;
      color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="demo-border">A border-inline example with vertical text.</p>
</div>
</body>
</html>

Related Properties

The table given below lists some related properties:














Property Description
border-inline-width Defines the width of the logical inline borders of an element.
border-inline-start-width Defines the width of the logical inline-start border of an element.
border-inline-end-width Defines the width of the logical inline-end border of an element.
border-inline-end A shorthand property for setting the individual logical inline-end border property
border-inline-color Defines the color of the logical inline borders of an element.
border-inline-start-color Defines the color of the logical inline start border of an element.
border-inline-end-color Defines the color of the logical inline-end border of an element.
border-inline-start A shorthand property for setting the individual logical inline-start border property.
border-inline-style Defines the style of the inline border of an element.
border-inline-start-style Defines the style of the logical inline start border of an element.
border-inline-end-style Defines the style of the logical inline end border of an element.

Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *