Fix border size css

CSS border-width Property

The border-width property sets the width of an element’s four borders. This property can have from one to four values.

• border-width: thin medium thick 10px;
  • top border is thin
  • right border is medium
  • bottom border is thick
  • left border is 10px
  • top border is thin
  • right and left borders are medium
  • bottom border is thick
  • top and bottom borders are thin
  • right and left borders are medium
  • all four borders are thin

  Note: Always declare the border-style property before the border-width property. An element must have borders before you can set the width.

  Default value:	medium
  Inherited:	no
  Animatable:	yes. Read about animatable Try it
  Version:	CSS1
  JavaScript syntax:	object.style.borderWidth=»1px 5px» Try it

  Browser Support

  The numbers in the table specify the first browser version that fully supports the property.

  CSS Syntax

  Property Values

  Value	Description	Demo
  medium	Specifies a medium border. This is default	Demo ❯
  thin	Specifies a thin border	Demo ❯
  thick	Specifies a thick border	Demo ❯
  length	Allows you to define the thickness of the border. Read about length units	Demo ❯
  initial	Sets this property to its default value. Read about initial
  inherit	Inherits this property from its parent element. Read about inherit

  More Examples

  Example

  Set the width of the borders to medium:

  Example

  Set the width of the borders to thick:

  Example

  Set the width of the borders to 1px:

  Example

  Set the width of the borders to 15px:

  Example

  Set the width of the top and bottom borders to 10px, and the width of the left and right borders to 1px:

  Источник

  How do i fix the size of css border?

  Now we will edit the above script and make changes in the border size in the style tag of the header section to visualize the difference between the size of the border of the container. We also used the Tailwind CS style sheet to call its border classes which provided different sizes for the border of a container and can be called via inline CSS styling.

  How do i fix the size of css border?

  I am learning html, css and javascript myself, using online tutorials. The css border next to bbc logo is too short. Please tell me why.

  

  Code: http://pastebin.com/FWrs084N (this code will always be there)

  Your padding was slightly off. Check this fiddle

  Basically change the property of logodiv from

  padding: 6px 80px 12px 20px 

  To avoid this in the future, you would ideally add a class name which would have the same properties, that way the elements get the consistent styles.

  body< margin:0; font-family: Helmet,Freesans,Helvetica,Arial,sans-serif; >#topbar < background-color: #CC0101; width: 100%; height: 40px; color: white; margin-top: 10px; >.fixedwidth < width: 1050px; margin: 0 auto; >#logodiv < padding-right: 10px; border-right: 5px solid #DA4C4C; >#signindiv < font-weight: bold; padding: 0 80px 0 20px; font-size: 0.9em; border-right: 5px solid #DA4C4C; >#topmenudiv ul < margin: 0; padding:0; >#topmenudiv li < list-style: none; font-weight: bold; font-size: 0.9em; border-right: 5px solid #DA4C4C; height: 100%; padding: 0 20px 8px 20px; >.fixedwidth > div

  CSS background-size property, Definition and Usage. The background-size property specifies the size of the background images. There are four different syntaxes you can use with this …

  Border-width in em — but set a minimum border-width

  I want a div to have a border-width relative to the font-size, so I set for example border-width: 0.1em; . But if the font size is too small, no border appears as it is rendered smaller as 0.5px . This is of course not what I want. Is there any chance to set a minimum border-width of 1px ?

  In CSS3, you can try to (ab)use the max css function, if your browser supports it.

  border-width: max(1px, 0.1em); border-style: solid; border-color: black; 

  Unfortunately this awesome CSS3 feature isn’t supported by any browsers yet, but I hope this will change soon!

  But in CSS2 – no, you can’t.
  However, you can use JavaScript/jQuery to loop through all elements and increase the border size to 1px.

  But this will eat so much performance your browser is gonna crash if you have too many elements on your page (e.g. a table with more than 50-100 rows).
  So in other words, no it’s not possible.

  $("[id$='ReportViewerControl']").find('*') .each(function () < if($(this).is('#ParametersRowReportViewerControl *')) return; //console.log("Processing an element"); //var cls = $(this).attr("class"); // Don't add a border to sort-arrow if ($(this).is('img')) < return; >var anywidth = $(this).css('width'); var anywidth = parseFloat(anywidth); //console.log("anywidth: " + anywidth); //var lol = $(this).css('borderLeftWidth'); var blw = $(this).css('border-left-width'); var brw = $(this).css('border-right-width'); var btw = $(this).css('border-top-width'); var bbw = $(this).css('border-bottom-width'); var borls = $(this).css('border-left-style') == "solid"; var borrs = $(this).css('border-right-style') == "solid"; var borts = $(this).css('border-top-style') == "solid"; var borbs = $(this).css('border-bottom-style') == "solid"; var blw = parseFloat(blw); var brw = parseFloat(brw); var btw = parseFloat(btw); var bbw = parseFloat(bbw); //parseInt($(this).css("borderRightWidth")) //console.log(parseInt($(this).css("borderLeftWidth"))); // UpdateLock = true; // Set width to 1px where 0px if (anywidth == 0) $(this).css('width', '1px'); if (borls && blw == 0.0 || (blw > 0.0 && blw < 1.0)) < //console.log("setting border width"); $(this).css('border-left-width', '1px'); >if (borrs && brw == 0.0 || (brw > 0.0 && brw < 1.0)) < $(this).css('border-right-width', '1px'); >if (borts && btw == 0.0 || (btw > 0.0 && btw < 1.0)) < $(this).css('border-top-width', '1px'); >if (borbs && bbw == 0.0 || (bbw > 0.0 && bbw < 1.0)) < $(this).css('border-bottom-width', '1px'); >// UpdateLock = false; >); // End $('*').each 

  It looks like different browsers handle borders thinner than 1px differently. In Firefox such borders appear to render as 1px wide, but in Chrome they go away. On the other hand it appears that Chrome renders box-shadow even if it’s less than 1px, so using it instead of border might be a good idea (Christina was actually suggesting it in the comment to the question). Than again some browsers won’t render box-shadow if it’s too thin (Firefox does that). Additionally box-shadow does not add the the box model, so using extra margin might be necessary.

  Here is an attempt at overcoming those problems. Note that I had to resort to JavaScript userAgent detection hack (just add one extra class to body if it’s a webkit browser), because I wasn’t able to achieve it using CSS alone.

  if (navigator.userAgent.toLowerCase().indexOf("webkit") > -1)

  /* Borders */.border< border:0.0625em solid black; >.shadowyBorder< box-shadow: 0 0 0 0.0625em black; /* Compensating for the fact that box-shadow doesn't count towards box model */ margin: 0.0625em; >.comboBorder < /* If it's not webkit use border */ border:0.0625em solid black; >/* If it's webkit use box-shadow */ .webkitHack .comboBorder < border: none; box-shadow: 0 0 0 0.0625em black; /* Compensating for the fact that box-shadow doesn't count towards box model */ margin: 0.0625em; >/* Extras */ td, th < padding:5px; >.em05 < font-size:8px; >.em1 < font-size:16px; >.em2 < font-size:32px; >.box

   
   
  Font size
  Border
  Box shadow
  Box shadow in webkit
   
   
   
  8px
      
   
   
  16px
      
   
   
  32px
      
   

  CSS Border | Border Width, The CSS border-style property sets the style of all four sides of an element’s borders. Borders are placed on the top of an element’s background. It can have …

  CSS Border Size

  “In this article, we will be explaining how to alter the size of the border by using different approaches in CSS in an HTML file. A div container contains a border with many distinct styles and aesthetic attributes like color, size, shape, and so on. In this article, we will be using Notepad++ to edit an HTML file by altering the border size using different properties that CSS provides, like Border-width.”

  Example 01: Using Style Tag CSS to Resize a Border in an HTML File

  In this example, we will be altering the size of a border of a div container by using CSS in the head tag in an HTML file. We will define a universal function for all div containers that will be created in this file to have the predefined editing style that we will define in the div section present in the Style Tag. So, to accomplish this task, we will generate the following script:

  

  As we can see in the above script of an HTML file, we have opened a style tag in which a div is called which has several properties defined one by one. First is padding, which will give the div container a space between the page of the browser and borders. Then we have called the border property itself, and, in this property, we will define the size of the border and the border type; in our case, it is set to “1px” and “solid.” Then we added web kits that will support the most commonly used browsers in the same property function. Then we closed the style and head tag and opened the body tag. In this tag, we have mentioned everything that will be present on the page once this file is opened in a browser.

  We have added a heading using the “h2” tag and also added a div container with some text in it. This div container will inherit all the properties defined in the style tag, which is present in the header of the file. These tags will be closed after this. And now, we will save this file in the “.html” format and open it in the browser to see the following output:

  

  As we can see in the above output, the heading and the div container are present, and the border of the container is also shown with a thin size along with some text in it.

  Now we will edit the above script and make changes in the border size in the style tag of the header section to visualize the difference between the size of the border of the container.

  

  We adjusted the size from “1px” to “5px” in the above script to generate a thicker border for the container. Let us now observe how this change appears in our browser when we execute the script.

  

  As we can see in the above output that the size of the border is now thick as compared to the previous output.

  Example # 02: Creating a Class in CSS Style Tag to Control the Size of a Border in an HTML File

  In this example, we will create a special class of CSS styling in which we will define every aspect of styling that we want throughout the file. This is a very helpful method because we can distinguish different designs in a single HTML file and classify them into different classes. In this example, we will classify the styling of a border of any container. To achieve that, we will write the following script:

  

  As we can see in this script, we have opened a style tag in the header of the HTML file. In this style tag, we have created a class for the paragraph tag styling in which we have defined two properties for the border, which are style and width. The style property is set to solid, which means that the border will be a uniform, straight line, and the width property is set to thin, which means that the border size will be thin. After this, we closed the style and head tag and moved toward the body tag. In the body tag, we have given a heading and a paragraph to the HTML page. In the Paragraph tag, we have called the “p.bw1” class, which has the border properties predefined in it. We will close the tags and save this file so that we can run this on our browser.

  

  After running this script on our browser, we will get the above output. As we can see, the style class for the paragraph tag has added a solid and thin border to the paragraph present in the body.

  Now we will vary the size of the border present in the above script and observe the effect of these variations on the border.

  

  In this situation, we have edited the width from thin to medium, and after running this script, we will get the following output:

  

  In this output, the border size has changed from thin to medium and is now much more visible. After this, we will change the size from medium to thick, as shown in the script below:

  

  After running this script, we will get the following output:

  

  After changing the width to thick, we can see that the border is very broader in size and quite easily visible.

  Example # 03: Using the Tailwind CSS Style Sheet to Alter Border Size Using the Border Class

  In this example, we will use the Tailwind CSS Style Sheet to change the size of a border using a border class defined in this style sheet. The border class has several predefined sizes for the border, which we will explore in this example by implementing this in Notepad++.

  

  In the above script, we will be adding the link to the Tailwind CSS style sheet using the link tag in the header of the file. Then we will open the body tag and give a heading to it. Then we will open the div tag, which we will call the class of border-2 with border color code, and then the paragraph tag will have the body text of the div container enclosed in it. Now we will save this file and open it on our browser to see how the border turns out.

  

  As we can see that the border size is very thin and can be adjusted to a bigger size, so we will increase the size by calling the border-8 class and see how it changes the border size.

  

  

  As we can see in the above snippet, the border is now thicker than before because of the border-8 class.

  Conclusion

  In this article, we focused on the CSS “size” attribute of a border. The border size is commonly specified with two identifiers: pixels and textual representation, such as “thin,” “medium,” and “thick.” We discussed several methods to alter the border size using CSS in an HTML file in this article. We used the Notepad++ environment to edit our HTML file and implemented conventional CSS methods of style tag and style class to alter the size of a border. We also used the Tailwind CS style sheet to call its border classes which provided different sizes for the border of a Container and can be called via inline CSS styling.

  CSS border-style property, The border-style property sets the style of an element’s four borders. This property can have from one to four values. Examples: border-style: dotted solid double …

  Источник

  Читайте также:  Php определить размеры изображения