Html – Removing the Bevel Effect on the Corner of Borders

bordercsshtml

If an element exists on a page with more than one border color, the corner where these colors meet create a bevel by default. This seems like an odd choice for the border-corner style. I would instead prefer that one of the borders "overpowers" the other border such that a straight line is shown instead.

To illustrate this effect, consider the following:

Top: default; bottom: desired

See example jsFiddle example I created here.

The top two items display the default, beveled behavior. The bottom two display the desired, expected behavior, where in this case, border-top "overpowers" or "overrides" the corner of border-left and border-right.

The markup for the top case:

<div class="container">
    <div class="border">Item one</div>
    <div class="border">Item two</div>
</div>

And the CSS:

.container {
    margin: 5px;
    width: 150px;
    background: yellow;
}
.border {
    padding: 5px;
    border: 15px solid red;
    border-top: 15px solid teal;
}

The markup for the bottom case:

<div class="container">
    <div class="border-top"></div>
    <div class="border-reg">Item one</div>
    <div class="border-top"></div>
    <div class="border-reg">Item two</div>
</div>

And the CSS:

.border-top {
    border-top: 15px solid teal;
}
.border-reg {
    border: 15px solid red;
    border-top: 0;
    padding: 5px;
}

Although the second method I devised does produce the effect I want, it seems as if this is unnecessarily tedious for something that I would have assumed to have the default state. If I were to want the border-left to override the other borders, for example, I would have to deal with some float: left and inline element madness.

The Question (Finally)

Is there any easier method of removing the default bevel-behavior observed on all browsers?

Although the case detailed above is mostly easy for having the border-top or border-bottom overriding the corners, it is not as easy of a task, for example, if I need the border-left and border-right to override the border-top and border-bottom.

Best Answer

If you don't need support for older browsers (IE 8 and less) you can use box-shadow:

.border {
    padding : 35px 20px 20px 20px;
    box-shadow: inset 0 0 0 15px red, inset 0 15px 0 15px teal;
}

http://jsfiddle.net/fTGDs/

Related Solutions

Html – What are valid values for the id attribute in HTML

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case 'f') and #FirstName { color: red } in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.

Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here: http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.