CSS: negative radii for unique border designs

I have a query regarding unique border designs that I recently encountered.

Is it possible to achieve similar borders without using any images? Take note, it should be at the bottom of the page as well.

You want them replicated at the bottom like in the example

There are two borders with what appears to be negative border-radius. However, implementing negative border-radius doesn't seem feasible. Therefore, I would greatly appreciate it if someone could offer a resolution to this challenge.

I attempted the solution provided here: First example, but encountered difficulty creating regular borders - the entire block simply becomes bordered.

htmlcss

Answer №1

Wrap your content in a div element and create rounded corners using child elements within the div. To achieve this, consider using border-radius on child elements:

For example: http://jsfiddle.net/5YS68/

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

p {
    margin: 0;
    width: 98px;
    height: 98px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
b.top-right {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

b.top-left {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

You can also utilize :before and :after pseudo-elements for cleaner HTML structure. Create one element (with before and after pseudo-elements positioned absolutely) for top corners, and another element for bottom corners

Answer №2

For those looking to jazz up their website borders, I recommend checking out the jQuery plugin available at http://jquery.malsup.com/corner/. This plugin offers a variety of border styling options that can enhance the overall look of your site.

If you're interested in another creative approach, take a look at Lea Verou's solution using negative border radius combined with css3 gradients. Check it out here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that any portion of a child DIV becomes visible only if it falls within the confines of the parent DIV, even if the overflow:hidden property is

My inner div can be resized by the user, and I have it inside another div. The issue is that when the inner div extends beyond the outer div, it covers it completely, or I have to use overflow:hidden, which hides the outer edges of the inner div. Ideally, ...

javascriptjquerycss

Creating a mask overlay that covers the entire screen while excluding a specific sibling div

My goal is to create a div that acts as a mask covering the entire window. It should have an opacity of 0.5 and a background color of lightgray. However, there is one particular div on the screen that I do not want to be affected by the mask. I attempted t ...

javascripthtmlcss

Uncovering specific content within an html document with the help of BeautifulSoup

I am currently working with a code that involves using BeautifulSoup to scrape text from elements with the class 'product'. However, I am only interested in extracting the 2nd and 4th values ('Product 2' and 'Product 4') to be ...

pythonhtmlbeautifulsoup

How can I add a loading page to my HTML/CSS website?

Currently, I am delving into the realm of coding and have encountered an issue while trying to integrate a loading page into my HTML. Despite referencing the code from this source, it appears that the loading page is not functioning as intended. Any assist ...

htmlcss

The percentage height setting for a div is not functioning properly, but setting the height in pixels or viewport

Within a dialog box body, I am attempting to display a table and have applied a CSS class to the wrapping div. When specifying the height in pixels or viewport height units, it works as expected. However, when using a percentage like 50%, the height of the ...

javascripthtmlcssecmascript-6

Incorporate numerical increments onto the Bootstrap progress bar

Is there a way to incorporate steps (circles with numbers inside) on top of a Bootstrap 4 progress bar that are equally spaced? I have been considering the following approach: // css .wrapper-progress-step { /* what should go here? this would ensure t ...

cssbootstrap-4flexbox

CSS showcase of a minimalist image gallery

I have designed a simple image gallery using the following CSS: .product_container { width:100%; display:block; } .product_images { width:45%; display:inline-block; border:1px solid black; } .product_images .large { } .product_images ...

htmlcss

Enhance Your CSS Abilities with These Helpful Guides

Over the past month, I've immersed myself in learning CSS. My journey began with devouring all the information I could find on www.w3school.com, followed by delving into CSS Mastery 2nd edition. While I have successfully built a couple of websites, I ...

css

What is the best way to replicate a CSS zoom effect in Firefox?

After implementing this code for a menu on my website, I noticed that it is not compatible with Firefox when testing it across different browsers. li { display: inline-block; list-style: none inside none; text-align: center; } li a:before { ...

htmlcssfirefoxzoomingscale

Customizing TableRow Hover Effects in React with Material-UI

I've been spinning in circles with this issue. It seems like I just can't grasp how class overrides function in Material-ui. I attempted to follow the advice in this response: CSS on Material UI components However, it didn't produce any res ...

cssreactjsmaterial-ui

The animation in my jQuery code is not functioning properly following an AJAX request

My animation is working fine after an initial ajax call, but when the user navigates back to the front page, it doesn't run. I'm new to Jquery and could use some guidance on how to fix this issue. I believe the problem might be related to using ...

javascriptjqueryhtmlajax

Changing class membership on the fly

Hey there! I'm having some trouble with my menu. My goal is to remove the 'active' class from one element and add it to the one I click on, but it's not working as expected... <div id="header2"> <div class="menu"&g ...

javascripthtmlclassmenuonclick

What is the best way to connect my JavaScript to this HTML for seamless functionality?

Hello fellow coders! I am a newbie in the coding world and I am facing some challenges with getting my javascript to work on my website. The main purpose of the javascript is to create smooth transitions between different sections of the site. I would grea ...

javascripthtml

When attempting to update a database, the Jquery ajax response is not being reflected

Currently, I am utilizing a dialog box for updating my database and removing services. However, I have encountered an issue where it only functions properly on the initial "remove" click. When I open the dialog box, I am presented with a list of 5 servic ...

jqueryhtmlajax

Conceal multiple divs at the same time based on their largest dimension

I am facing an issue with two divs, each containing two nested divs: https://i.sstatic.net/QFMiU.png <div class="hide"> <div> Variable size </div> <div> Text1 (also variable size) </div&g ...

javascriptcssangularsass

Update the text content of an HTML element by fetching data from a database using AJAX and JQuery based on its

I recently started learning Jquery and came across an issue while working on a web development project. I am trying to dynamically convert an HTML element to a paragraph based on the ID from the URL which is fetched from the database. Here is the code sni ...

phphtmljqueryajaxcodeigniter

Incorporating a variable within an HTML document without the need for

Here's a snippet of HTML code I'm working with: <body> <table width="650"> <tr width="650"> <td width="650"> lots of text here </td> </tr> </table> </body> Is there a way I can use a variable or c ...

html

Ensure that the JavaScript is loaded prior to refreshing the webpage

Below is the HTML code snippet: <script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap&v=quarterly" defer></script> <script src="{% static '/javascript/maplanguage.js' %}">< ...

javascripthtmljquerydjangogoogle-maps

What could be causing the inability of Firefox4 to render the background color of the li element?

Is there a way to apply a background color to a forced inline element? I am having issues with displaying the background color in Firefox4, while it works fine in IE7. Can someone help me understand why this is happening and how to fix it? You can view th ...

htmlcss

Using jQuery to dynamically add li elements with AJAX and using the Append and Prepend methods

Having a little trouble here. Here is the HTML snippet: <ul class="buildings-list"> <li class="gchoice_20_0"> <input name="input_20" type="radio" value="House" checked="checked" /> <label for="choice_20_0" id="label_ ...

jqueryhtmlajaxdynamic