Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Border Block

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      border-block

      The CSS shorthand property border-block is a logical property that defines width, style and color of both the start and end in the block dimension at once.
      • border-block property acts on both the start and finish in the block dimension. The writing mode, directionality, and text orientation of the element determine which precise physical borders are impacted.
      • When the writing-mode is set to the default horizontal direction, border-block is applied to the top and bottom borders of an element.
      • Conversely, a vertical writing-mode, applies border-block to the right and left borders.

      Possible values

      • <border-width> - The width of the border.
      • <border-style> - The line style of the border.
      • <border-color> - The color of the border.

      Constituent Properties

      This property is a shorthand for the following CSS properties:
      • border-block-color
      • border-block-style
      • border-block-width

      Syntax

      border-block: <border-block-width> || <border-block-style> || <border-block-color>

      Applies to

      All the HTML elements.

      CSS border-block - Basic Example

      The following example demonstrates the css border-block property.
      <html>
      <head>
      <style>
         .border-demo {
            width: 300px;
            height: 150px;
            margin: 20px;
            padding: 20px;
            background-color: #f0f0f0;
            border-block: 5px dotted #3498db; 
         }
         .add-demo {
            font-size: 18px;
            color: #111;
         }
      </style>
      </head>
      <body>
      <div class="border-demo">
      <p class="add-demo">This is a bordered element with padding and background color.</p>
      <p>This is an example for border-block property</p>
      </div>
      </body>
      </html>

      CSS border-block - writing-mode Property

      The following example demonstrates the CSS properties border-block with vertical writing mode.
      <html>
      <head>
      <style>
         .vertical-border {
            writing-mode: vertical-rl;
            direction: ltr;
            width: 150px;
            height: 250px;
            margin: 50px;
            padding: 20px;
            background-color: #f0f0f0;
            border-block: 1rem solid red; 
         }
         .add-style {
            font-size: 18px;
            color: #333;
         }
      </style>
      </head>
      <body>
      <div class="vertical-border">
      <p class="add-style">This is a vertical bordered element with a solid red border.</p>
      </div>
      </body>
      </html>

      Related Properties

      The table given below lists some related properties:
      Property
      Description
      border-block
      A shorthand property.
      border-block-start
      A shorthand property for setting the individual logical block-start border property values.
      border-block-end
      A shorthand property for setting the individual logical block-end border property values.
      border-block-color
      Defines the color of the logical block borders of an element.
      border-block-start-color
      Defines the color of the logical block-start border of an element.
      border-block-end-color
      Defines the color of the logical block-end border of an element.
      border-block-style
      Defines the style of the logical block borders of an element.
      border-block-start-style
      Defines the style of the logical block start border of an element.
      border-block-end-style
      Defines the style of the logical block-end border of an element.
      border-block-width
      Defines the width of the logical block borders of an element.
      border-block-start-width
      Defines the width of the logical block-start border of an element.
      border-block-end-width
      Defines the width of the logical block-end border of an element.