Home » Tutorials » CSS » Border

Border

The CSS property border has done wonders in the field of organization and separation of content. However, I would also argue that overuse of border leads to excessive visual distractions. Enough of my personal vendetta against overcrowding, let’s actually talk about borders. HTML elements are nested inside tags, which means they have implicit borders. We will be making those explicit with the CSS border properties. The properties of borders are very numerous and the majority of these border properties are useful. However, if we can categorize most of them in our minds, we will have a manageable list and idea of how to use borders.

Common CSS Border Properties

  • border-width – sets size of the border’s line width
  • border-color – sets size of the border’s line color
  • border-style – sets the border’s style
  • border-radius – gives the border a rounded line (Not supported in all browsers)

I know, I know. You’re thinking what the is point in telling me something that isn’t supported in all browser, but this one is super awesome and is supported in most current browsers. The border-radius breaks the mold of boring borders and in CSS3 they even have cool shadow effects! The others are pretty self-explanatory. Let’s code them up.

Example
<style type="text/css">
    div.special
    {
        width:150px;
        text-align:center;
        border-width:medium;
        border-color:#009;
        border-style:outset;
        border-radius:5px;
    }
</style>
<div class="special">
    Sample Content
</div>
Result
Sample Content

Boom! Now, we have an awesome looking border. We set the width and text alignment of the class really quick, but then we got into border properties. The border-width is somewhat tricky. I set it to medium just so you would scratch your head. It can actually be set to real quantifiable measures like 5px. It’s always good to know you can use the thin, medium, and thick though. Next, border-color doesn’t really elicit an explanation, but border-style certainly does. We have it set to outset here, which happened to be my favorite before CSS3 shadows. It can apply a few different styles like dashed, solid, outset, inset, etc. Finally, border-radius takes a measurement to determine how much to bend at each corner.

Border Sides

Now, I have withheld important information from you. Quite often, you might only want a border on the bottom, only on two sides, etc., this is very simple to do. The browser reads your CSS and assumes you want every side to display. In all actuality, we can just tell the sides not to show.

Example
<style type="text/css">
    div.special2
    {
        width:150px;
        text-align:center;
        border-style:solid;
        border-right:none;
        border-left:none;
        border-top:none;
    }
</style>
<div class="special2">
    Sample Content
</div>
Result
Sample Content

The bottom part of the border is only show because the rest were deliberately told not to display. If we wanted to completely make it disappear, which we don’t because that would be stupid, we would also have put border-bottom:none;. That would have given us an invisible border. You can also use border-bottom-style:none to do everything we just did with one line. All of the previous properties mention can be implemented just by typing border- plus the side top- for example plus the actual property color.

References



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Border". After Hours Programming. Accessed on March 18, 2024. https://www.afterhoursprogramming.com/tutorial/css/border/.

  • Stewart, Suzy. "Border". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/css/border/. Accessed 18 March, 2024.

  • Stewart, Suzy. Border. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/css/border/.



0 thoughts on “Border”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.