Display text on border css

border

The border shorthand CSS property sets an element’s border. It sets the values of border-width , border-style , and border-color .

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: revert; border: revert-layer; border: unset; 

The border property may be specified using one, two, or three of the values listed below. The order of the values does not matter.

Note: The border will be invisible if its style is not defined. This is because the style defaults to none .

Values

Sets the thickness of the border. Defaults to medium if absent. See border-width .

Sets the style of the border. Defaults to none if absent. See border-style .

Sets the color of the border. Defaults to currentcolor if absent. See border-color .

Description

As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border cannot be used to specify a custom value for border-image , but instead sets it to its initial value, i.e., none .

The border shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width , border-style , and border-color properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top ) and logical (e.g., border-block-start ) border properties.

Borders vs. outlines

Borders and outlines are very similar. However, outlines differ from borders in the following ways:

• Outlines never take up space, as they are drawn outside of an element’s content.
• According to the spec, outlines don’t have to be rectangular, although they usually are.

Formal definition

• border-width : as each of the properties of the shorthand:
  • border-top-width : medium
  • border-right-width : medium
  • border-bottom-width : medium
  • border-left-width : medium
  • border-top-style : none
  • border-right-style : none
  • border-bottom-style : none
  • border-left-style : none
  • border-top-color : currentcolor
  • border-right-color : currentcolor
  • border-bottom-color : currentcolor
  • border-left-color : currentcolor
  • border-width : as each of the properties of the shorthand:
    • border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden
    • border-left-width : the absolute length or 0 if border-left-style is none or hidden
    • border-right-width : the absolute length or 0 if border-right-style is none or hidden
    • border-top-width : the absolute length or 0 if border-top-style is none or hidden
    • border-bottom-style : as specified
    • border-left-style : as specified
    • border-right-style : as specified
    • border-top-style : as specified
    • border-bottom-color : computed color
    • border-left-color : computed color
    • border-right-color : computed color
    • border-top-color : computed color
    • border-color : as each of the properties of the shorthand:
      • border-bottom-color : a color
      • border-left-color : a color
      • border-right-color : a color
      • border-top-color : a color
      • border-bottom-width : a length
      • border-left-width : a length
      • border-right-width : a length
      • border-top-width : a length

      Formal syntax

      border =
      ||
      ||

      =
      |
      thin |
      medium |
      thick

      =
      none |
      hidden |
      dotted |
      dashed |
      solid |
      double |
      groove |
      ridge |
      inset |
      outset

      Examples

      Setting a pink outset border

      HTML

      div>I have a border, an outline, and a box shadow! Amazing, isn't it?div> 

      CSS

      div  border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; > 

      Result

      Specifications

      Browser compatibility

      BCD tables only load in the browser

      See also

      Found a content problem with this page?

      This page was last modified on Jul 18, 2023 by MDN contributors.

      Your blueprint for a better internet.

      MDN

      Support

      Our communities

      Developers

      Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
      Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

      Источник

      CSS Displaying text on a border css

      The following tutorial shows you how to use CSS to do «CSS Displaying text on a border css».

      CSS Style

      The CSS style to do «CSS Displaying text on a border css» is

      #selection < height:300px; width:400px; border:1px solid #666; > h3 < width:180px; margin-top:-10px; margin-left:10px; background:#EEE; padding-left:10px; font-size:14px; color:#000; >

      HTML Body

      body> div style="height:100px">   div id="selection"> h3>Select Pizza Base Size   

      The following iframe shows the result. You can view the full source code and open it in another tab.

      html> head> meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js" > style id="compiled-css" type="text/css"> #selection!-- w w w . d e mo 2 s .c o m --> height:300px; width:400px; border:1px solid #666; > h3< width:180px; margin-top:-10px; margin-left:10px; background:#EEE; padding-left:10px; font-size:14px; color:#000; >  body> div style="height:100px">  div id="selection"> h3>Select Pizza Base Size    

      Related

      • CSS display:inline-block with border (Demo 6)
      • CSS display:inline-block with border (Demo 7)
      • CSS Display Inset Border around Gravatar like on Twitter
      • CSS Displaying text on a border css
      • CSS : background gradient cropped when no border
      • CSS div border — Collapsing to 0 height
      • CSS Div border cut off when behind another div

      demo2s.com | Email: | Demo Source and Support. All rights reserved.

      Источник

      How to Add Text in Borders Using Basic HTML Elements

      Some HTML elements come with preset designs, like the inconveniently small squares of elements, the limited-color bars of elements, and the “something about them bothers me” arrows of the elements. We can style them to match the modern aesthetics of our websites while making use of their functionalities. There are also many elements that rarely get used as both their default appearance and functionality are less needed in modern web designs. One such HTML element is , along with its child element . A element is traditionally used to group and access form controls. We can visually notice the grouping by the presence of a border around the grouped content on the screen. The caption for this group is given inside the element that’s added as the first child of the .

      This combination of

      and creates a unique ready-made “text in border” design where the caption is placed right where the border is and the line of the border doesn’t go through the text. The border line “breaks” when it encounters the beginning of the caption text and resumes after the text ends. In this post, we’ll make use of the

      and combo to create a more modern border text design that’s quick and easy to code and update.

      For the four borders, we need four

      elements, each containing a element inside. We add the text that will appear at the borders inside the elements.

      Wash Your Hands
       
      Stay Apart
       
      Wear A Mask
       
      Stay Home

      To begin, we stack the

      elements on top of each other in a grid cell and give them borders. You can stack them using any way you want — it doesn’t necessarily have to be a grid. Only the top border of each

      element is kept visible while the remaining edges are transparent since the text of the element appears at the top border of the

      by default. Also, we give all the

      elements a box-sizing property with a value of border-box so the width and height of the

      elements include their border and padding sizes too. Doing this later creates a leveled design, when we style the elements.

      After this, we rotate the last three

      elements in order to use their top borders as the side and bottom borders of our design.

      /* rotate to right */ fieldset:nth-of-type(2) < transform: rotate(90deg); >/* rotate to bottom */ fieldset:nth-of-type(3) < transform: rotate(180deg); >/* rotate to left */ fieldset:nth-of-type(4)

      Next up is styling the

      elements. The key to create smooth border text using a

      element is to give it a zero (or small enough) line-height . If it has a large line height, that will displace the position of the border it’s in, pushing the border down. And when the border moves with the line height, we won’t be able to connect all the four sides of our design and will need to readjust the borders.

      legend < font: 15pt/0 'Averia Serif Libre'; margin: auto; /* to center */ padding: 0 4px; >fieldset:nth-of-type(3) > legend

      I used the font shorthand property to give the values for the font-size , line-height and font-family properties of the

      elements. The

      element that adds the text at the bottom border of our design, fieldset:nth-of-type(3)>legend , is upside-down because of its rotated parent element. Flip that

      element vertically to show its text right-side-up. Add an image to the first element and you get something like this:

      Lateral margins can move the text along the border. Left and right margins with auto values will center the text, as seen in the above Pen. Only the left margin with an auto value will flush the text to the right, and vice versa, for the right margin.

      Источник

      CSS Borders

      The CSS border properties allow you to specify the style, width, and color of an element’s border.

      I have borders on all sides.

      I have a red bottom border.

      I have a blue left border.

      CSS Border Style

      The border-style property specifies what kind of border to display.

      The following values are allowed:

      • dotted — Defines a dotted border
      • dashed — Defines a dashed border
      • solid — Defines a solid border
      • double — Defines a double border
      • groove — Defines a 3D grooved border. The effect depends on the border-color value
      • ridge — Defines a 3D ridged border. The effect depends on the border-color value
      • inset — Defines a 3D inset border. The effect depends on the border-color value
      • outset — Defines a 3D outset border. The effect depends on the border-color value
      • none — Defines no border
      • hidden — Defines a hidden border

      The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

      Example

      Demonstration of the different border styles:

      A groove border. The effect depends on the border-color value.

      A ridge border. The effect depends on the border-color value.

      An inset border. The effect depends on the border-color value.

      An outset border. The effect depends on the border-color value.

      Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!

      Источник