SShortSingh.
Back to feed

CSS border-shape property shapes boxes while preserving borders and shadows

0
·1 views

A new CSS property called border-shape is in development, addressing a long-standing limitation where using clip-path to shape an element would also clip its borders, outlines, and box-shadows. Unlike clip-path, which cuts the entire painted element including decorations, border-shape reshapes the box boundary so that borders and shadows follow the new outline instead of being removed. The property accepts the same values as clip-path, including the shape() and polygon() functions, and also supports a fill mode where the border renders as the area between two defined paths. CSS-Tricks published an explainer by Temani Afif detailing the mechanics and syntax of the property. Currently, border-shape is only supported in Chromium-based browsers, making it unsuitable for production use but available for experimentation in side projects.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

Log in to join the discussion and vote.

Log in

Related stories

0
ProgrammingDEV Community ·

OpenAI Launches GPT-Realtime-2.1 Models for Faster, Cheaper Voice Agents

OpenAI has released two new Realtime API models — gpt-realtime-2.1 and gpt-realtime-2.1-mini — designed to simplify the development of low-latency voice agents. Unlike traditional pipelines that chain separate speech-to-text and text-to-speech services, both models handle audio understanding and generation through a single live connection, reducing end-to-end latency. The mini variant is positioned as the cost-efficient option, adding reasoning capabilities to real-time voice at the same price as its predecessor, and supporting tool use so agents can think, call functions, and respond within a single conversational flow. OpenAI reports at least a 25% improvement in p95 latency across Realtime voice models due to better caching. Developers can choose between the two models based on task complexity, volume, and quality requirements, with reasoning effort levels adjustable from minimal to extra-high.

0
ProgrammingDEV Community ·

Why Functional Programming Can Be Slower Than You Think

Functional programming is widely praised for elegance and maintainability, but its performance costs are rarely discussed openly. Common patterns like chained array methods and spread-based object updates create multiple intermediate allocations, increasing pressure on the garbage collector. Immutable operations such as object spreading copy all existing properties on every iteration, making them significantly more expensive than simple in-place mutation at scale. Techniques like transducers were specifically developed to address these inefficiencies by processing data in a single pass without intermediate arrays. Understanding these tradeoffs helps engineers make informed decisions rather than assuming that more functional code is automatically more efficient.

0
ProgrammingDEV Community ·

How Podman and Buildah Enable Rootless, Daemonless CI/CD Pipelines

Traditional CI/CD pipelines often mount the root-level Docker daemon socket inside pipeline runners, granting full host access and creating a serious security vulnerability. A 2024 flaw known as CVE-2024-21626 ('Leaky Vessels') demonstrated how this architecture can allow a malicious container to escape and access the host filesystem. Podman and Buildah offer an alternative by using a fork-exec model that communicates directly with the Linux kernel, eliminating the need for a persistent background daemon or exposed API socket. Running containers inside unprivileged user namespaces means that even a successful runtime escape only lands an attacker as a low-privilege service account, not root. This architecture is particularly relevant for edge deployments and industrial infrastructure where protecting physical hardware from supply-chain attacks is critical.

0
ProgrammingDEV Community ·

Intercom Alternatives in 2026: How Pricing Model Should Drive Your Choice

A July 2026 comparison of customer support platforms groups Intercom alternatives by pricing model rather than features, arguing that billing structure determines long-term costs more than any checklist. Intercom, which rebranded as Fin in May 2026, charges both per-seat fees and a $0.99-per-resolution AI meter, which can push a five-person team's annual bill to around $14,000. Salesforce announced a roughly $3.6 billion acquisition of Fin on June 15, 2026, a deal not yet closed that adds roadmap and pricing uncertainty. Teams seeking predictability can choose per-seat tools like Zendesk or Freshdesk, flat-rate platforms like Crisp, usage-based options like Gorgias or Chatbase, or the open-source self-hosted route via Chatwoot. The guide was compiled from public pricing pages and vendor documentation as of July 2026, with the caveat that prices can change at any time.