Loading Please Wait...

Logo Lynxsia IT Solutions

CSS Border Block

CSS Border Block

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

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

border-block 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 top and bottom. When writing orientation is vertical then the start and end will be left and right.

					 
        
          /* sets start (top) and end (bottom) border */
          border-block: 5px groove #a3d9ea;
          writing-mode: horizontal-tb;

          /* sets start (right) and end (left) border */
          border-block: 10px solid blue;
          writing-mode: vertical-rl;

          /* sets start (left) and end (right) border */
          border-block: 10px solid blue;
          writing-mode: vertical-lr;
        
      
Individual Properties

The following properties are set by the border-block

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

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

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

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

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

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

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

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

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

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

          /* block border end color */
          border-block-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