Is it possible to add a bottom border without having slanted corners?

Question

Is it possible to add a bottom border without having slanted corners?

I am looking to design a box with different colors - red on the left, right, and top, and grey at the bottom. However, I want the bottom border of the box to be flat.

HTML

<div class="ts"></div>

CSS

.ts {    
    height:100px;
    width:100px;
    border-width:10px 10px 20px 10px;
    border-style:solid;
    border-color:#f00 #f00 #ddd #f00;
}

When I use the above code, it appears like this:

However, I do not want the bottom border to have a diagonal corner. I would like it to be flat instead;

http://jsfiddle.net/3jHG8/

Is there a simple way to achieve this that works across different browsers?

html css border flat

Answer 1

Answer №1

To achieve a cool effect, simply apply the CSS box-shadow property like this:

Check out the JSFIDDLE DEMO 1 here

HTML Code:

<div class="ts"></div>

CSS Styling:

.ts {    
    height: 100px;
    width: 100px;
    border-width: 10px 10px 0px 10px;
    border-style: solid;
    border-color: #f00 #f00 transparent #f00;
    box-shadow: 0 20px 0 #ddd;
}

Alternatively, you can use just the box-shadow property:

.ts {
height: 100px;
width: 100px;
box-shadow: inset 0 10px 0 0 #f00,inset 10px 0 0 0 #f00,inset -10px 0 0 0 #f00, 0 20px 0 #ddd;
}

View the JSFIDDLE DEMO 2 for more inspiration

For older versions of IE7 and IE8, consider using CSS3 PIE to mimic text-shadow effects.

Answer 2

To achieve a cool effect, simply apply the CSS box-shadow property like this:

Check out the JSFIDDLE DEMO 1 here

HTML Code:

<div class="ts"></div>

CSS Styling:

.ts {    
    height: 100px;
    width: 100px;
    border-width: 10px 10px 0px 10px;
    border-style: solid;
    border-color: #f00 #f00 transparent #f00;
    box-shadow: 0 20px 0 #ddd;
}

Alternatively, you can use just the box-shadow property:

.ts {
height: 100px;
width: 100px;
box-shadow: inset 0 10px 0 0 #f00,inset 10px 0 0 0 #f00,inset -10px 0 0 0 #f00, 0 20px 0 #ddd;
}

View the JSFIDDLE DEMO 2 for more inspiration

For older versions of IE7 and IE8, consider using CSS3 PIE to mimic text-shadow effects.

Answer 3

Answer №2

Unfortunately, what you're requesting cannot be done. However, you can achieve a similar result by using the following code snippet:

<div class="custom-style">Lorem ipsum dolor sit amet consectetur adipiscing elit</div>

.custom-style {    
 height:200px;
 width:150px;
 padding:15px;
 border-bottom:15px solid #ccc;
 background-color:#000;
}

I hope this solution works for you.

Answer 4

Unfortunately, what you're requesting cannot be done. However, you can achieve a similar result by using the following code snippet:

<div class="custom-style">Lorem ipsum dolor sit amet consectetur adipiscing elit</div>

.custom-style {    
 height:200px;
 width:150px;
 padding:15px;
 border-bottom:15px solid #ccc;
 background-color:#000;
}

I hope this solution works for you.

Is it possible to add a bottom border without having slanted corners?

Answer №1

Check out the JSFIDDLE DEMO 1 here

View the JSFIDDLE DEMO 2 for more inspiration

Answer №2

Similar questions

Ensure that the entire webpage is optimized to display within the viewport

Is there a way to showcase an HTML body in the Gmail app on iOS?

Restrict the child's height to the remaining space within the parent container

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

What are some techniques to create a dynamic background for a div that

Navigating Checkbox in Active Choice Reactive Reference Parameter on Jenkins

Getting rid of the excess white space below the footer caused by concealed elements

Custom navigation bar created using Bootstrap 4

Emphasizing buttons that are in a "pressed" or "inactive" state

Loading Bootstrap Modal with click event triggering

Tips for getting my navigation bar menu button functioning properly?

The pseudo element 'not' in CSS is currently not functioning as expected when applied to an anchor tag

Verify whether a div element is styled in a specific manner

Using jQuery to access the value of the CSS property "margin-left"

The space residing above my primary container division

I’m currently working on my webpage, utilizing HTML, CSS, and Bootstrap 4. I’ve encountered an issue where a slide keeps appearing at the bottom, but I’m

Ways to delete a tag with jQuery

Tips for adjusting the hue of a single color in a JPEG image

What is the best way to eliminate the appearance of the blue square that shows up when the button is clicked on smaller screens?

Is anyone else experiencing issues with the jQuery slide-in not working on a particular website? How can I determine which version of jQuery is compatible with this site?