Loading Please Wait...

Logo Lynxsia IT Solutions

CSS Border Inline

CSS Border Inline

CSS border-inline property sets logical inline border property values of the element.

					 
        
          border-inline: 5px;
          border-inline: 5px solid;
          border-inline: 5px solid red;
        
      

border-inline property sets start and end border of the element with respect to the writing mode, directionality, and text orientation.

It means, if the writing orientation is horizontal then the start and end will be left and right. When writing orientation is vertical then the start and end will be bottom and bottom.

					 
        
          /* sets start (left) and end (right) border */
          border-inline: 5px groove #a3d9ea;
          writing-mode: horizontal-tb;

          /* sets start (top) and end (bottom) border */
          border-inline: 10px solid blue;
          writing-mode: vertical-rl;

          /* sets start (bottom) and end (top) border */
          border-inline: 10px solid blue;
          writing-mode: vertical-lr;
        
      
Individual Properties

The following properties are set by the border-inline

  • border-inline-width
  • border-inline-style
  • border-inline-color
  • border-inline-start
    • border-inline-start-width
    • border-inline-start-style
    • border-inline-start-color
  • border-inline-end
    • border-inline-end-width
    • border-inline-end-style
    • border-inline-end-color
					 
        
          /* inline border width */
          border-inline-width: 10px;

          /* inline border style */
          border-inline-style: dotted;

          /* inline border color */
          border-inline-color: green;

          /* inline border start */
          border-inline-start: 0.5rem inset blue;

          /* inline border start width */
          border-inline-start-width: 0.5rem;

          /* inline border start style */
          border-inline-start-style: inset;

          /* inline border start color */
          border-inline-start-color: blue;

          /* inline border end */
          border-inline-end: 1em outset pink;

          /* inline border end width */
          border-inline-end-width: 0.5rem;

          /* inline border end style */
          border-inline-end-style: outset;

          /* inline border end color */
          border-inline-end-color: pink;
        
      

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved