Revision 1047690 of Borders

<p>{{PreviousNext("Learn/CSS/Styling_boxes/Backgrounds", "Learn/CSS/Styling_boxes/Styling_tables")}}</p>

<p class="summary">Again, we've already looked at borders a bit previously in the Learning Area — simple uses like setting border colors and styles. Here we'll provide a quick recap, then give you an idea of what else is available, such as rounded corners and border images.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td>HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of How CSS works (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td>To learn the full story about styling element borders.</td>
  </tr>
 </tbody>
</table>

<h2 id="Border_recap">Border recap</h2>

<p>As you will have seen earlier on in the course, elements have a border that sits comfortably between the element's padding and margin.By default the border has a size of 0 — making it invisible — but you can set the thickness, style and color of the border to make it appear.</p>

<h3 id="Border_shorthand">Border shorthand</h3>

<p>The {{cssxref("border")}} shorthand property allows you to set all of these on all four sides at once, for example<code>:</code></p>

<pre class="brush: html">
&lt;p&gt;I have a red border!&lt;/p&gt;</pre>

<pre class="brush: css">
p {
  padding: 10px;
  background: yellow;
  border: 2px solid red;
}</pre>

<p>{{ EmbedLiveSample('Border_shorthand', '100%', 80) }}</p>

<h3 id="Longhand_options">Longhand options</h3>

<p><code>border</code> can be broken down into numerous different longhand properties for more specific styling needs:</p>

<ul>
 <li>{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}: Set the thickness, style and color of one side of the border.</li>
 <li>{{cssxref("border-width")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}: Set only the thickness, style, or color individually, but for all four sides of the border.</li>
 <li>You can also set one of the three properties of a single side of the border individually, using {{cssxref("border-top-width")}}, {{cssxref("border-top-style")}}, {{cssxref("border-top-color")}}, etc.&nbsp;</li>
</ul>

<p>You might be wondering why there are so many longhand options — well, it is useful to have them available so that you can override or turn off individual bits of styling as necessary without having to constantly redefine everything; it can save you a lot of lines of code in the long run. It is also worth knowing that the border takes the color of the text by default, and a wifth of 3px, when no values are explicitly set.</p>

<p>With this in mind, let's look at an example of a writing progress planner for a fictional book. Each chapter is represented by a {{htmlelement("div")}} element that is set to a fixed width and contains the chapter number and title. The writing progress is indicated by the following key:</p>

<ul>
 <li>Not started/incomplete chapters are marked by a dotted border.</li>
 <li>Chapters that have been written but need reviewing are marked by a dashed border.</li>
 <li>Chapters that are complete (written and reviewed) are marked by a solid border.</li>
 <li>Chapters that are in the process of being written or reviewed are marked by a thick red solid bottom border.</li>
</ul>

<p>Let's look at some CSS we could use to implement this:</p>

<div class="hidden">
<pre class="brush: html">
&lt;h1&gt;Writing progress&lt;/h1&gt;

&lt;div class="complete"&gt;
  &lt;p&gt;Chapter 1: I was born&lt;/p&gt;
&lt;/div&gt;

&lt;div class="complete"&gt;
  &lt;p&gt;Chapter 2: School&lt;/p&gt;
&lt;/div&gt;

&lt;div class="written review"&gt;
  &lt;p&gt;Chapter 3: University&lt;/p&gt;
&lt;/div&gt;

&lt;div class="written"&gt;
  &lt;p&gt;Chapter 4: Rock and roll&lt;/p&gt;
&lt;/div&gt;

&lt;div class="incomplete writing"&gt;
  &lt;p&gt;Chapter 5: Fell in love&lt;/p&gt;
&lt;/div&gt;

&lt;div class="incomplete"&gt;
  &lt;p&gt;Chapter 6: Children&lt;/p&gt;
&lt;/div&gt;

&lt;div class="incomplete"&gt;
  &lt;p&gt;Chapter 7: Tired!&lt;/p&gt;
&lt;/div&gt;</pre>
</div>

<pre class="brush: css">
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 220px;
  padding: 20px;
  margin: 10px;
  line-height: 2;
  background-color: yellow;
  text-align: center;
  display: inline-block;
}

.complete {
  border-style: solid;
}

.written {
  border-style: dashed;
}

.incomplete {
  border-style: dotted;
}

.writing, .review {
  border-bottom: 6px solid red;
}</pre>

<p>This gives us the following result:</p>

<p>{{ EmbedLiveSample('Longhand_options', '100%', 300) }}</p>

<p>There really isn't much styling used to accomplish this. We haven't declared any border styling on the <code>div</code> rule at all; just the specific classes we've used to convery the different points in the editorial process. We've relied on the default width and color for the borders, and just set the style for <code>.complete</code>, <code>.written</code>, and <code>.incomplete</code>. Then for chapters where <code>.writing</code> or <code>.review</code> is actively in progress, we've had to specify the entire set of properties just for the bottom border. This is way more efficient than having to set an entire border shorthand for every different box type.</p>

<p>You can find the example on Github as <a href="https://mdn.github.io/learning-area/css/styling-boxes/borders/border-longhand.html">border-longhand.html</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/borders/border-longhand.html">source code</a>).</p>

<h2 id="Border_radius">Border radius</h2>

<p>Rounded corners on boxes are another incredibly popular feature on web sites — so popular in fact that browsers implemented a property specifically for implementing rounded corners easily: {{cssxref("border-radius")}}. Previous to this (and to multiple background images being supported), developers used to have to wrap each box they wanted to have rounded corners in three additional <code>&lt;div&gt;</code>s, and attach a separate rouned corner graphic to each of these four elements. If they wanted their boxes to be flexible, that is.</p>

<div class="note">
<p><strong>Note</strong>: You might still have to do this if you need to have exactly the same look for older browsers — {{cssxref("border-radius")}} is supported in Internet Explorer 9 and above. But missing rounded corners are not going to stop users being able to read your content, so users of older browsers can probably live without them.</p>
</div>

<p>This is now a lot easier — you simply use the following property:</p>

<pre class="brush: css">
border-radius: 20px;</pre>

<p>To put a different size of border radius on different corners, you can specify two, three or four values, rather like you can with {{cssxref("padding")}} and {{cssxref("margin")}}:</p>

<pre class="brush: css">
/* 1st value is top left and bottom right corners,
   2nd value is top right and bottom left  */
border-radius: 20px 10px;
/* 1st value is top left corner, 2nd value is top right
   and bottom left, 3rd value is bottom right  */
border-radius: 20px 10px 50px;
/* top left, top right, bottom right, bottom left */
border-radius: 20px 10px 50px 0;</pre>

<p>As a last point, you can also create elliptical corners (where the x radius is different to the y radius.) The two different radii are specified separated by a forward slash (<code>/</code>), and you can combine this with any combination of values, as indicated above. For example:</p>

<pre class="brush: css">
border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;</pre>

<div class="note">
<p><strong>Note</strong>: You can use any length units to specify border radii, e.g. pixels, rems, percentages.</p>
</div>

<div class="note">
<p><strong>Note</strong>: Longhand properties are also available, to set the border radius of each corner of the box individually: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, and {{cssxref("border-bottom-right-radius")}}.</p>
</div>

<h3 id="Active_learning_Playing_with_border_radius">Active learning: Playing with border radius</h3>

<p>For this active learning, we want you to implement some different types of border radius on the provided element. Try adding:</p>

<ul>
 <li>The same rounded corner on every corner.</li>
 <li>The same elliptical corner on every corner.</li>
 <li>A different rounded and eliptical corner on every corner.</li>
 <li>Rounded corners to each corner using the three value syntax.</li>
 <li>A rounded corner to the bottom left corner.</li>
 <li>Rounded corners using different unit values, to see how they behave. Percentages are interesting — why?</li>
</ul>

<p>If you make a mistake, you can always reset it using the <em>Reset</em> button.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">
&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
  &lt;h2&gt;HTML Input&lt;/h2&gt;
  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;div class="rounded"&gt;
&nbsp; &lt;p&gt;Rounded corners are groovy!&lt;/p&gt;
&lt;/div&gt;
  &lt;/textarea&gt;

  &lt;h2&gt;CSS Input&lt;/h2&gt;
  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;.rounded {
&nbsp; width: 220px;
&nbsp; padding: 20px;
&nbsp; margin: 10px;
&nbsp; line-height: 2;
&nbsp; background-color: yellow;
&nbsp; text-align: center;
&nbsp; border-style: dashed;
}&lt;/textarea&gt;

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"&gt;&lt;/div&gt;
  &lt;div class="controls"&gt;
&nbsp;   &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js">
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
&nbsp; htmlInput.value = htmlCode;
&nbsp; cssInput.value = cssCode;
&nbsp; drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>

<h2 id="Border_images">Border images</h2>

<p>Finally, let's look at the most recent (and complex) addition to CSS for manipulating borders — {{cssxref("border-image")}}. The idea here is that sometimes creating a complex user interface feature will require a complex design for the border, not just a solid color. This could possibly be created by overlaying one element right in the center on top of another larger element, and applying a background image to the bottom element, faking a complex border. Or in extreme cases, you might even have to create a 3 x 3 grid of nine elements, with the center element as your content, and the surrounding eight elements having the border elements applied to them.</p>

<p>{{cssxref("border-image")}} images makes it a lot easier to achieve complex patterned borders, albeit in modern browsers (Internet Explorer 11+ suports it, as well as other modern browsers.) Let's have a look at how this works.</p>

<p>First of all, you need to have an image to apply to your browser. This will typically be a 3 x 3, 4 x 4, 5 x 5 (etc.) grid design, like the following:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13060/border-image.png" style="display:block; height:160px; margin:0px auto; width:160px" /></p>

<p>When such an image is used for border image, the browser slices the image up into 8 pieces, as indicated by the next image:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13062/border-slices.png" style="display:block; margin:0 auto" />The corner images will be inserted in the corners of your border, and the top, right, bottom and left slices will be used to fill up the corresponding sides of your border (by stretching, or repeating). We need to tell the browser to make the slices the right size — this image for example is 160px, and a 4 x 4 grid, so each slice will need to be 40px.</p>

<p>To start with, we need a box to apply the border to. This needs to have a border specified, otherwise the border image will have no space to appear in. We will also use {{cssxref("background-clip")}} to make any background color only fill the area under the content and padding, and not extend under the border as well (you may not want this for your design, but it is useful in cases like this).</p>

<pre class="brush: css">
border: 30px solid black;
background-clip: padding-box;</pre>

<div class="note">
<p><strong>Note</strong>: You should always include a {{cssxref("border")}} definition alongside any use of {{cssxref("border-image")}} — this acts as a fallback in case the border image can't be shown, for example if the browser doesn't support the feature.</p>
</div>

<p>Next, we'll use {{cssxref("border-image-source")}} to specify the source image to use as the border image. This works in exactly the same way as {{cssxref("background-image")}}, being able to accept a <code>url()</code> function or a gradient as a value.</p>

<pre class="brush: css">
border-image-source: url(border-image.png);</pre>

<p>Now we'll use {{cssxref("border-image-slice")}} to set the required size of the slices, as described above:</p>

<pre class="brush: css">
border-image-slice: 40;</pre>

<p>This property can take one value if all the slices are the same size, or multiple values if the slices need to be different sizes, in the same manner as {{cssxref("padding")}} and {{cssxref("margin")}}:</p>

<ul>
 <li>Two values: top and bottom, left and right.</li>
 <li>Three values: Top, left and right, bottom.</li>
 <li>Four values: Top, right, bottom, left.</li>
</ul>

<p>The unitless values corresponse to pixels if you are referencing a raster graphic like a <code>.png</code> or <code>.jpg</code>, or coordinates if you are referencing a vector image like an <code>.svg</code>. You can also use percentages. Check out the&nbsp;{{cssxref("border-image-slice")}} page for more options and details.<code> </code></p>

<div class="note">
<p><strong>Note</strong>: By default, the ninth slice — the center piece — is omitted completely, and the element content appears in the gap that is left. If you want the center of the border image left in, you can do so by including the keyword <code>fill</code> at the end of your {{cssxref("border-image-source")}} value, in which case it will stretch to fit the background area.</p>
</div>

<p>Finally, we'll use {{cssxref("border-image-repeat")}} to specify how we want the images to fill up the border sides. The options are:</p>

<ul>
 <li><code>stretch</code>: The default; the side images are stretched to fill the borders. This generally looks terrible and pixellated, so is not recommended.</li>
 <li><code>repeat</code>: The side images are repeated until the borders are filled. Depending on circumstances, this might look ok, but you can get left with unsightly image fragments.</li>
 <li><code>round</code>: The side images are repeated until the borders are filled, and they are all stretched slightly so that no fragments appear.</li>
 <li><code>space</code>: The side images are repeated until the borders are filled, and a small amount of spacing is added between each copy such that no fragments appear. This value is only supported in Safari (9+) and Internet Explorer (11+).</li>
</ul>

<p>We decided to go with the round value, as it seems to be the most useful and flexible:</p>

<pre class="brush: css">
border-image-repeat: round;</pre>

<h3 id="Putting_this_all_together">Putting this all together</h3>

<p>Let's put all of this code together to show a working example. First, some simple HTML:</p>

<pre class="brush: html">
&lt;div&gt;
  &lt;p&gt;Border image&lt;/p&gt;
&lt;/div&gt;</pre>

<p>Now our CSS:</p>

<pre class="brush: css">
div {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  line-height: 3;
  background-color: #f66;
  text-align: center;
  /* border-related properties */
  border: 20px solid black;
  background-clip: padding-box;
  border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
  border-image-slice: 40;
  border-image-repeat: round;
}</pre>

<p>Here is the result:</p>

<p>{{ EmbedLiveSample('Putting_this_all_together', '100%', 200) }}</p>

<p>Something interesting that you may have noticed is that the border has been set to 20px width, while the image slices are 40 — in this case, the browser just resizes the slices down to 20px wide so it fits.</p>

<p>You can find this example as <a href="https://mdn.github.io/learning-area/css/styling-boxes/borders/border-image.html">border-image.html</a> on Github (see also the <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/borders/border-image.html">source code</a>). Make a local copy and have a play.</p>

<h3 id="Other_properties">Other properties</h3>

<p>Two less commonly used border image properties are as follows:</p>

<ul>
 <li>{{cssxref("border-image-width")}}: Resizes the border image only, not the border — if this is set smaller than the {{cssxref("border-width")}}, it will sit against the outside of the border, not filling it. IF it is larger, then it will expand beyond the border and start to overlap the padding/content.</li>
 <li>{{cssxref("border-image-outset")}}: Defines the size of an extra layer of space between the inside of the border and the padding — kind of like "border padding". This is an easy way to move the border-image out a bit if desired.</li>
</ul>

<h3 id="Shorthand">Shorthand</h3>

<p>As you might expect, there is a shorthand property available, {{cssxref("border-image")}}, which allows you to set all of the related values on one line. The following lines:</p>

<pre class="brush: css">
border-image-source: url(border-image.png);
border-image-slice: 40;
border-image-repeat: round;</pre>

<p>Can be replaced by this one:</p>

<pre class="brush: css">
border-image: url(border-image.png) 40 round;</pre>

<h2 id="Summary">Summary</h2>

<p>Now you understand borders, right? Not the ones at the edges of your country, but the ones at the edges of your elements. Borders are useful to understand, and have many different uses. In the article that follows, we'll take a sideways step, and explore best practices for styling tables — this will show a useful application of some of the techniques we've looked at so far in the module.</p>

<p>{{PreviousNext("Learn/CSS/Styling_boxes/Backgrounds", "Learn/CSS/Styling_boxes/Styling_tables")}}</p>